@telefonica/mistica 16.25.0 → 16.26.0

package/css/mistica-common.css

@@ -43,10 +43,19 @@
     --vcolor-controlActivated: var(--mistica-color-controlActivatedInverse);
     --vcolor-checkbox-tick: var(--mistica-color-controlKnobInverse);
     --vcolor-checkbox-background: transparent;
+
+    --vcolor-inputBorder: var(--mistica-color-backgroundContainer);
+
+    --vcolor-barTrack: var(--mistica-color-barTrackInverse);
+
+    --vcolor-switch-trackBackground: transparent;
+    --vcolor-switch-handleChecked: var(--mistica-color-controlKnobInverse);
+    --vcolor-switch-handleHover: var(--mistica-color-inverse);
 }
 
 [data-mistica-skin] > *,
 [data-mistica-variant='default'] > *,
+.mistica-boxed > *,
 .mistica-card > *,
 .mistica-snap-card > *,
 .mistica-display-card > * {
@@ -92,6 +101,14 @@
     --vcolor-controlActivated: var(--mistica-color-controlActivated);
     --vcolor-checkbox-tick: var(--mistica-color-inverse);
     --vcolor-checkbox-background: var(--mistica-color-background);
+
+    --vcolor-inputBorder: var(--mistica-color-inputBorder);
+
+    --vcolor-barTrack: var(--mistica-color-barTrack);
+
+    --vcolor-switch-trackBackground: var(--mistica-color-backgroundAlternative);
+    --vcolor-switch-handleChecked: var(--mistica-color-inverse);
+    --vcolor-switch-handleHover: var(--mistica-color-neutralHigh);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -102,12 +119,20 @@
         --mistica-boxed-border: none;
     }
 
+    [data-mistica-variant='inverse'] > * {
+        --vcolor-inputBorder: var(--mistica-color-inputBorder);
+    }
+
     [data-mistica-color-scheme='light'][data-mistica-skin] > *,
     [data-mistica-color-scheme='light'] [data-mistica-variant='default'] > *,
     [data-mistica-color-scheme='light'] .mistica-card > *,
     [data-mistica-color-scheme='light'] .mistica-snap-card > * {
         --mistica-boxed-border: 1px solid var(--mistica-color-border);
     }
+
+    [data-mistica-color-scheme='light'] [data-mistica-variant='inverse'] > * {
+        --vcolor-inputBorder: var(--mistica-color-backgroundContainer);
+    }
 }
 
 [data-mistica-color-scheme='dark'][data-mistica-skin] > *,
@@ -117,6 +142,10 @@
     --mistica-boxed-border: none;
 }
 
+[data-mistica-color-scheme='dark'] [data-mistica-variant='inverse'] > * {
+    --vcolor-inputBorder: var(--mistica-color-inputBorder);
+}
+
 [data-mistica-skin] {
     background: var(--mistica-color-background);
 }
@@ -201,6 +230,7 @@
     font-size: var(--mistica-font-size-link);
     line-height: var(--mistica-line-height-link);
     font-weight: var(--mistica-font-weight-link);
+    -webkit-tap-highlight-color: transparent;
 }
 .mistica-text-title1 {
     color: var(--vcolor-textSecondary);
@@ -294,6 +324,7 @@
     align-items: center;
     justify-content: center;
     text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
 }
 label.mistica-chip {
     padding: 0;
@@ -340,13 +371,15 @@ label.mistica-chip > span:before {
     width: 100%;
     height: 100%;
     background: transparent;
-    transition: background-color 0.1s ease-in-out;
+    /* transition: background-color 0.1s ease-in-out; */
 }
 
-button.mistica-chip:hover:before,
-a.mistica-chip:hover:before,
-label.mistica-chip > input:hover + span:before {
-    background: var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    button.mistica-chip:hover:before,
+    a.mistica-chip:hover:before,
+    label.mistica-chip > input:hover + span:before {
+        background: var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 button.mistica-chip:active:before,
@@ -383,6 +416,7 @@ label.mistica-chip > input:checked + span {
     color: inherit;
     font: inherit;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     padding: 0;
     margin: 0;
     min-width: 24px;
@@ -451,10 +485,13 @@ label.mistica-chip > input:checked + span {
     line-height: inherit;
     font-family: inherit;
     text-decoration: underline;
+    -webkit-tap-highlight-color: transparent;
 }
 
-.mistica-text-link:hover:not([disabled]) {
-    text-decoration-thickness: 0.125em;
+@media (pointer: fine) {
+    .mistica-text-link:hover:not([disabled]) {
+        text-decoration-thickness: 0.125em;
+    }
 }
 
 .mistica-text-link[disabled] {
@@ -480,6 +517,7 @@ label.mistica-chip > input:checked + span {
     line-height: var(--mistica-line-height-1);
     font-weight: var(--mistica-font-weight-1);
     color: var(--vcolor-textPrimary);
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-breadcrumb li + li::before {
@@ -491,8 +529,10 @@ label.mistica-chip > input:checked + span {
     content: '';
 }
 
-.mistica-breadcrumb a:hover {
-    text-decoration-thickness: 0.125rem;
+@media (pointer: fine) {
+    .mistica-breadcrumb a:hover {
+        text-decoration-thickness: 0.125rem;
+    }
 }
 
 .mistica-breadcrumb li:last-of-type a {
@@ -523,7 +563,7 @@ label.mistica-chip > input:checked + span {
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    --webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
     transition:
         background-color 0.1s ease-in-out,
         color 0.1s ease-in-out,
@@ -544,8 +584,10 @@ label.mistica-chip > input:checked + span {
     background: var(--vcolor-buttonPrimaryBackground);
 }
 
-[class^='mistica-button-primary']:hover {
-    background: var(--vcolor-buttonPrimaryBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-primary']:hover {
+        background: var(--vcolor-buttonPrimaryBackgroundHover);
+    }
 }
 
 [class^='mistica-button-primary']:active {
@@ -558,8 +600,10 @@ label.mistica-chip > input:checked + span {
     border-color: var(--vcolor-buttonSecondaryBorder);
 }
 
-[class^='mistica-button-secondary']:hover {
-    background: var(--vcolor-buttonSecondaryBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-secondary']:hover {
+        background: var(--vcolor-buttonSecondaryBackgroundHover);
+    }
 }
 
 [class^='mistica-button-secondary']:active {
@@ -571,8 +615,10 @@ label.mistica-chip > input:checked + span {
     background: var(--mistica-color-buttonDangerBackground);
 }
 
-[class^='mistica-button-danger']:hover {
-    background: var(--mistica-color-buttonDangerBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-danger']:hover {
+        background: var(--mistica-color-buttonDangerBackgroundHover);
+    }
 }
 
 [class^='mistica-button-danger']:active {
@@ -583,9 +629,10 @@ label.mistica-chip > input:checked + span {
     color: var(--vcolor-textLink);
     background: transparent;
 }
-
-[class^='mistica-button-link']:hover {
-    background: var(--vcolor-buttonLinkBackgroundPressed);
+@media (pointer: fine) {
+    [class^='mistica-button-link']:hover {
+        background: var(--vcolor-buttonLinkBackgroundPressed);
+    }
 }
 
 [class^='mistica-button-link']:active {
@@ -617,6 +664,7 @@ label.mistica-chip > input:checked + span {
     height: auto;
     transition: background 0.1s ease-in-out;
     isolation: isolate;
+    -webkit-tap-highlight-color: transparent;
 }
 
 @media (min-width: 1024px) {
@@ -648,13 +696,15 @@ label.mistica-chip > input:checked + span {
     z-index: 1;
 }
 
-a.mistica-card:hover:after,
-a.mistica-snap-card:hover:after,
-a.mistica-display-card:hover:after,
-button.mistica-card:hover:after,
-button.mistica-snap-card:hover:after,
-button.mistica-display-card:hover:after {
-    background: var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    a.mistica-card:hover:after,
+    a.mistica-snap-card:hover:after,
+    a.mistica-display-card:hover:after,
+    button.mistica-card:hover:after,
+    button.mistica-snap-card:hover:after,
+    button.mistica-display-card:hover:after {
+        background: var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 a.mistica-card:active:after,
@@ -669,6 +719,7 @@ button.mistica-display-card:active:after {
 .mistica-naked-card,
 .mistica-small-naked-card {
     text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-naked-card > *,
@@ -678,11 +729,13 @@ button.mistica-display-card:active:after {
         filter 0.1s ease-in-out;
 }
 
-a.mistica-naked-card:hover > *,
-button.mistica-naked-card:hover > *,
-a.mistica-small-naked-card:hover > *,
-button.mistica-small-naked-card:hover > * {
-    opacity: 0.8;
+@media (pointer: fine) {
+    a.mistica-naked-card:hover > *,
+    button.mistica-naked-card:hover > *,
+    a.mistica-small-naked-card:hover > *,
+    button.mistica-small-naked-card:hover > * {
+        opacity: 0.8;
+    }
 }
 
 a.mistica-naked-card:active > *,
@@ -692,12 +745,14 @@ button.mistica-small-naked-card:active > * {
     opacity: 0.6;
 }
 
-a.mistica-naked-card:hover > .mistica-card__media,
-button.mistica-naked-card:hover > .mistica-card__media,
-a.mistica-small-naked-card:hover > .mistica-card__media,
-button.mistica-small-naked-card:hover > .mistica-card__media {
-    opacity: 1;
-    filter: brightness(75%);
+@media (pointer: fine) {
+    a.mistica-naked-card:hover > .mistica-card__media,
+    button.mistica-naked-card:hover > .mistica-card__media,
+    a.mistica-small-naked-card:hover > .mistica-card__media,
+    button.mistica-small-naked-card:hover > .mistica-card__media {
+        opacity: 1;
+        filter: brightness(75%);
+    }
 }
 
 a.mistica-naked-card:active > .mistica-card__media,
@@ -803,9 +858,11 @@ button.mistica-small-naked-card:active > .mistica-card__media {
     background: var(--mistica-color-cardContentOverlay);
 }
 
-a.mistica-display-card:has(.mistica-card__media):hover:after,
-button.mistica-display-card:has(.mistica-card__media):hover:after {
-    background: var(--mistica-color-cardContentOverlay) var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    a.mistica-display-card:has(.mistica-card__media):hover:after,
+    button.mistica-display-card:has(.mistica-card__media):hover:after {
+        background: var(--mistica-color-cardContentOverlay) var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 a.mistica-display-card:has(.mistica-card__media):active:after,
@@ -929,6 +986,11 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     padding: 16px;
     margin: 0 -16px;
     transition: background-color 0.1s ease-in-out;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mistica-accordion-item__summary::-webkit-details-marker {
+    display: none;
 }
 
 .mistica-accordion-item__summary-body {
@@ -963,8 +1025,10 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     color: var(--vcolor-accordionChevronOpen);
 }
 
-.mistica-accordion-item__summary:hover {
-    background-color: var(--vcolor-accordionHover);
+@media (pointer: fine) {
+    .mistica-accordion-item__summary:hover {
+        background-color: var(--vcolor-accordionHover);
+    }
 }
 
 .mistica-accordion-item__summary:active {
@@ -1200,6 +1264,93 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     }
 }
 
+/* Switch */
+.mistica-switch {
+    --switch-border-width: 2px;
+    --switch-transition: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    appearance: none;
+    position: relative;
+    width: 52px;
+    height: 32px;
+    border-radius: 16px;
+    background-color: var(--vcolor-switch-trackBackground);
+    border: var(--switch-border-width) solid var(--vcolor-control);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+        background-color var(--switch-transition),
+        border-color var(--switch-transition);
+}
+
+/* :after is the switch handle (bolita) */
+.mistica-switch:after {
+    content: '';
+    position: absolute;
+    top: calc(8px - var(--switch-border-width));
+    left: calc(8px - var(--switch-border-width));
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--vcolor-control);
+    transition:
+        transform var(--switch-transition),
+        background-color var(--switch-transition);
+}
+
+@media (pointer: fine) {
+    .mistica-switch:hover:after {
+        background-color: var(--vcolor-switch-handleHover);
+    }
+}
+
+.mistica-switch:checked {
+    background-color: var(--vcolor-controlActivated);
+    border-color: var(--vcolor-controlActivated);
+}
+.mistica-switch:checked:after {
+    background-color: var(--vcolor-switch-handleChecked);
+    transform: translateX(20px) scale(1.5);
+}
+
+.mistica-switch:active:after {
+    transform: scale(1.75);
+}
+.mistica-switch:checked:active:after {
+    transform: translateX(20px) scale(1.75);
+}
+
+/* :before is the ripple effect overlay on hover */
+.mistica-switch:before {
+    content: '';
+    position: absolute;
+    top: calc(-8px + var(--switch-border-width));
+    left: calc(-8px + var(--switch-border-width));
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: transparent;
+    transition:
+        transform var(--switch-transition),
+        background-color var(--switch-transition);
+}
+
+.mistica-switch:checked:before {
+    transform: translateX(20px);
+}
+
+@media (pointer: fine) {
+    .mistica-switch:hover:before {
+        background-color: var(--mistica-color-backgroundContainerHover);
+    }
+}
+
+.mistica-switch:active:before {
+    background-color: var(--mistica-color-backgroundContainerPressed);
+}
+
 /* Checkbox */
 .mistica-checkbox {
     appearance: none;
@@ -1217,6 +1368,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     background: var(--vcolor-checkbox-background);
     box-shadow: inset 0 0 0 2px var(--vcolor-control);
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     transition: box-shadow 0.3s;
 }
 
@@ -1257,6 +1409,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     line-height: var(--mistica-line-height-3);
     font-weight: var(--mistica-font-weight-3);
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-checkbox-label:has(.mistica-checkbox:disabled) {
@@ -1267,3 +1420,426 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
 .mistica-checkbox-label:has(.mistica-checkbox:disabled) > .mistica-checkbox {
     opacity: initial; /* avoid applying 0.5 opacity twice */
 }
+
+/* Counter */
+
+.mistica-counter {
+    border-radius: var(--mistica-border-radius-button);
+    background: var(--mistica-color-backgroundContainer);
+    display: inline-flex;
+    gap: 8px;
+    overflow: hidden;
+    border: 1px solid var(--vcolor-inputBorder);
+}
+
+.mistica-counter input {
+    width: 3.75ch;
+    background: transparent;
+    border: none;
+    appearance: none;
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    font-weight: 400;
+    caret-color: var(--mistica-color-textActivated);
+    color: var(--mistica-color-textPrimary);
+    text-overflow: ellipsis;
+    outline: none;
+    box-shadow: none;
+    text-align: center;
+    -moz-appearance: textfield;
+}
+
+.mistica-counter__button {
+    user-select: none;
+    isolation: isolate;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--mistica-color-controlActivated);
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mistica-counter__button svg {
+    z-index: 1;
+}
+
+.mistica-counter__button:before {
+    z-index: 0;
+    content: '';
+    display: block;
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    right: 3px;
+    bottom: 3px;
+    border-radius: var(--mistica-border-radius-button);
+    background: var(--mistica-color-brandLow);
+    transform: scale(0);
+    transition:
+        transform 0.2s ease-in-out,
+        background 0.1s ease-in-out;
+}
+
+@media (pointer: coarse) {
+    .mistica-counter__button:before {
+        transition: none;
+    }
+}
+
+@media (pointer: fine) {
+    .mistica-counter__button:hover:not(:disabled):before {
+        transform: scale(1);
+    }
+}
+
+.mistica-counter__button:active:not(:disabled):before {
+    transform: scale(1.06);
+}
+
+.mistica-counter__button:disabled {
+    cursor: default;
+    color: var(--mistica-color-control);
+}
+
+/* Slider */
+
+.mistica-slider {
+    --slider-thumb-position: 50%;
+    isolation: isolate;
+    position: relative;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    height: 20px;
+    outline: none;
+    margin: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mistica-slider::-webkit-slider-thumb {
+    position: relative;
+    z-index: 1;
+    appearance: none;
+    background: var(--vcolor-controlActivated);
+    width: 20px;
+    height: 20px;
+    cursor: grab;
+    border-radius: 50%;
+    transition: box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    box-shadow: none;
+}
+
+.mistica-slider::-moz-range-thumb {
+    position: relative;
+    z-index: 1;
+    background: var(--vcolor-controlActivated);
+    width: 20px;
+    height: 20px;
+    cursor: grab;
+    border-radius: 50%;
+    transition: box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border: none; /*Removes extra border that FF applies*/
+}
+
+@media (pointer: fine) {
+    .mistica-slider::-webkit-slider-thumb:hover {
+        box-shadow: 0 0 0 4px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+    }
+    .mistica-slider::-moz-range-thumb:hover {
+        box-shadow: 0 0 0 4px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+    }
+}
+
+.mistica-slider:active::-webkit-slider-thumb,
+.mistica-slider:focus-visible::-webkit-slider-thumb {
+    cursor: grabbing;
+    box-shadow: 0 0 0 8px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+}
+
+.mistica-slider:active::-moz-range-thumb,
+.mistica-slider:focus-visible::-moz-range-thumb {
+    cursor: grabbing;
+    box-shadow: 0 0 0 8px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+}
+
+.mistica-slider::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    border-radius: var(--mistica-border-radius-bar);
+    background: linear-gradient(
+        to right,
+        var(--vcolor-controlActivated) var(--slider-thumb-position),
+        var(--vcolor-barTrack) var(--slider-thumb-position)
+    );
+}
+
+.mistica-slider::-moz-range-track {
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    border-radius: var(--mistica-border-radius-bar);
+    background: linear-gradient(
+        to right,
+        var(--vcolor-controlActivated) var(--slider-thumb-position),
+        var(--vcolor-barTrack) var(--slider-thumb-position)
+    );
+}
+
+/* FeedbackScreen */
+
+@keyframes mistica-animation-shake {
+    10%,
+    90% {
+        transform: translateX(3px);
+    }
+    20%,
+    80% {
+        transform: translateX(6px);
+    }
+    30%,
+    50%,
+    70% {
+        transform: translateX(0);
+    }
+    40%,
+    60% {
+        transform: translateX(8px);
+    }
+}
+
+@keyframes mistica-animation-text-appear {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--text-appear-distance));
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.mistica-feedback-screen {
+    --text-animation: mistica-animation-text-appear 1s both cubic-bezier(0.215, 0.61, 0.355, 1);
+    --text-appear-distance: 16px;
+    padding: 64px 0 16px;
+}
+
+@media (min-width: 1024px) {
+    .mistica-feedback-screen {
+        --text-appear-distance: 40px;
+        margin-top: 64px;
+        border-radius: var(--mistica-border-radius-legacyDisplay);
+        border: var(--mistica-boxed-border);
+        background: var(--mistica-color-backgroundContainer);
+        padding: 64px;
+    }
+
+    .mistica-feedback-screen > .mistica-fixed-footer-buttons {
+        margin-top: 40px;
+    }
+}
+
+@media (max-width: 1023px) {
+    .mistica-feedback-screen {
+        /* Space for fixed buttons */
+        padding-bottom: 142px;
+    }
+}
+
+.mistica-feedback-screen__asset {
+    --asset-animation: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 24px;
+}
+
+.mistica-feedback-screen__asset-error-inside {
+    animation: var(--asset-animation);
+    animation-delay: 0.8s;
+}
+
+.mistica-feedback-screen__asset-error-outside {
+    animation: var(--asset-animation);
+    animation-delay: 0.84s;
+}
+
+.mistica-feedback-screen__title {
+    font-size: var(--mistica-font-size-6);
+    line-height: var(--mistica-line-height-6);
+    font-weight: var(--mistica-font-weight-6);
+    color: var(--mistica-color-textPrimary);
+    animation: var(--text-animation);
+    animation-delay: 0.6s;
+}
+
+.mistica-feedback-screen__description {
+    margin-top: 16px;
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    font-weight: 400;
+    color: var(--mistica-color-textSecondary);
+    animation: var(--text-animation);
+    animation-delay: 0.8s;
+}
+
+.mistica-feedback-screen__slot {
+    margin-top: 16px;
+    animation: var(--text-animation);
+    color: var(--mistica-color-textSecondary);
+    animation-delay: 1s;
+}
+
+.mistica-fixed-footer-buttons {
+    display: flex;
+    gap: 16px;
+}
+
+@media (max-width: 1023px) {
+    .mistica-fixed-footer,
+    .mistica-fixed-footer-buttons {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--mistica-color-background);
+        box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .mistica-fixed-footer-buttons {
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .mistica-fixed-footer-buttons {
+        padding: 32px 24px;
+    }
+}
+
+/* TextField */
+.mistica-text-field {
+    --border-width: 1px;
+    --vertical-padding: calc(8px - var(--border-width));
+    --gap: 12px;
+    --right-padding: calc(16px - var(--border-width));
+    --shrinked-label-line-height: 1.25rem;
+    --label-scale: 1;
+    --icon-size: 1.5rem;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--mistica-border-radius-input);
+    border: var(--border-width) solid var(--mistica-color-inputBorder);
+    width: 328px;
+    background: var(--mistica-color-backgroundContainer);
+    color: var(--mistica-color-textPrimary);
+}
+
+@media (max-width: 1023px) {
+    .mistica-text-field {
+        --shrinked-label-line-height: 1rem;
+        width: 100%;
+    }
+}
+
+.mistica-text-field > * {
+    --start-icon-size: 0px;
+    --left-padding: calc(12px - var(--border-width) + var(--start-icon-size));
+}
+
+.mistica-text-field .mistica-text-field__start-icon ~ * {
+    --start-icon-size: calc(var(--icon-size) + var(--gap));
+}
+
+.mistica-text-field__start-icon {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    position: absolute;
+    top: calc(50% - var(--icon-size) / 2);
+    left: 12px;
+    color: var(--mistica-color-neutralHigh);
+    margin-right: var(--gap);
+    pointer-events: none;
+}
+
+.mistica-text-field > label {
+    position: absolute;
+    left: var(--left-padding);
+    top: var(--vertical-padding);
+    pointer-events: none;
+    transform-origin: 0 0;
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    width: calc(100% - var(--left-padding) - var(--right-padding));
+    transform: translateY(calc(var(--shrinked-label-line-height) / 2));
+    transition:
+        transform 150ms,
+        width 150ms;
+    color: var(--mistica-color-textSecondary);
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+.mistica-text-field:focus-within > label,
+.mistica-text-field > input:not(:placeholder-shown) + label {
+    --label-scale: 0.75;
+    transform: translateY(0) scale(var(--label-scale));
+    line-height: calc(var(--shrinked-label-line-height) / var(--label-scale));
+    width: calc((100% - var(--left-padding) - var(--right-padding)) / var(--label-scale));
+    color: var(--mistica-color-textActivated);
+}
+
+.mistica-text-field > input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    appearance: none;
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    font-weight: 400;
+    padding: calc(var(--vertical-padding) + var(--shrinked-label-line-height)) var(--right-padding)
+        var(--vertical-padding) var(--left-padding);
+    caret-color: var(--mistica-color-textActivated);
+    color: inherit;
+    border-radius: calc(var(--mistica-border-radius-input) - var(--border-width));
+    text-overflow: ellipsis;
+    outline: none;
+    box-shadow: none;
+}
+
+.mistica-text-field > input::placeholder {
+    opacity: 0;
+    transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.mistica-text-field > input:focus::placeholder {
+    opacity: 0.5;
+}
+
+.mistica-text-field > input::-webkit-search-cancel-button {
+    appearance: none;
+}
+.mistica-text-field > input::-webkit-search-decoration {
+    appearance: none;
+}