.aw-text-field {
    @apply border border-mono-800 text-base;
    position: relative;
    transition: 200ms border-color;
    background-color: var(--c-surface);
    border-radius: 0.625rem;

    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;

    &--page {
        background-color: var(--c-page-bg);
    }

    &.aw-search {
        padding-top: 0;
        padding-bottom: 0;
    }

    input:autofill {
        background-image: none;
    }

    &:hover {
        @apply border-mono-600;
    }

    &:focus-within {
        @apply border-mono-400;
    }

    & > div:first-child:not(.aw-tooltip),
    & > span:first-child:not(.aw-tooltip) {
        border-top-left-radius: calc(0.625rem - 1px);
        border-bottom-left-radius: calc(0.625rem - 1px);
    }

    & > div:last-child {
        border-top-right-radius: calc(0.625rem - 1px);
        border-bottom-right-radius: calc(0.625rem - 1px);
    }

    &.has-label::before {
        border-radius: calc(0.625rem - 1px);
    }

    &__prefix,
    &__postfix {
        @apply bg-mono-800 flex items-center whitespace-no-wrap;

        margin-top: -0.1875rem;
        margin-bottom: -0.1875rem;
    }

    &--uncolor-prefix &__prefix,
    &--uncolor-postfix &__postfix {
        background-color: inherit;
        color: inherit;
    }

    &__prefix {
        @apply rounded-l;
    }

    &__postfix {
        @apply rounded-r;
    }

    &__element {
        @apply w-full truncate block;
        background-color: var(--c-surface);
        color: var(--c-on-surface);
        line-height: 1.5;
        border-radius: 0.625rem;

        /* reset autofill (firefox)*/
        filter: none;

        /* reset autofill (chrome) */
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus {
            animation-name: autoFillStart;
            -webkit-text-fill-color: var(--c-on-surface);
            -webkit-box-shadow: 0 0 0px 1000px var(--c-surface) inset;
            transition: background-color 5000s ease-in-out 0s;
        }

        &:not(:-webkit-autofill) {
            animation-name: autoFillEnd;
        }

        /* reset :invalid (firefox) */
        box-shadow: none;

        /* reset ouline (chrome) */
        &:focus {
            outline: none;
        }

        /* &[readonly]:focus {
            border-color: theme('colors.info.100');
        } */

        /* reset shadow in safari */
        appearance: none;

        &::placeholder {
            color: inherit;
            opacity: 0.5;
        }
    }

    &--page &__element {
        background-color: var(--c-page-bg);
        color: var(--c-on-page-bg);
    }

    &__fake-input {
        --icon-width: 2.5rem;
        --icon-count: 0;
        display: block;
        height: calc(1em * theme('lineHeight.normal', 1.5));
        min-width: 0;
        max-width: calc(100% - calc(var(--icon-count) * var(--icon-width)));
    }

    /**
     * Native select styles
     */
    &.is-select,
    &.is-select &__element {
        cursor: pointer;
    }

    &.is-select &__element {
        position: relative;
        z-index: 0;
        background-color: transparent;
    }

    &__caret {
        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0.4;
        transition: 200ms opacity;

        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;

        & > svg {
            transition: 200ms transform;
        }
    }

    &:hover &__caret {
        opacity: 1;
    }

    &.is-select &__element:focus ~ &__caret > svg {
        transform: rotate(-180deg);
    }

    &.is-select {
        select::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: var(--c-surface);
        }

        select::-webkit-scrollbar-thumb {
            background-color: rgba(var(--c-on-surface-rgb), 0.1);
        }

        option {
            background: var(--c-surface)
                linear-gradient(
                    0deg,
                    var(--c-surface) 0%,
                    var(--c-surface) 100%
                );
            color: var(--c-on-surface);
        }

        option:hover {
            background: var(--c-info)
                linear-gradient(0deg, var(--c-info) 0%, var(--c-info) 100%);
            color: var(--c-on-info);
        }

        option:checked {
            background: var(--c-accent)
                linear-gradient(0deg, var(--c-accent) 0%, var(--c-accent) 100%);
            color: var(--c-on-accent);
        }
    }

    /**
     * Textarea styles
     */

    &.is-textarea &__element {
        resize: vertical;
        overflow: auto;
        white-space: pre-wrap;
    }

    &.is-textarea.has-label::before {
        @apply absolute h-5;
        top: 0;
        left: 1px;
        right: 1px;
        content: '';
        background-color: var(--c-surface, inherit);
    }

    &.is-textarea.has-label.is-disabled:before {
        @apply bg-mono-900;
    }

    &.is-hidden {
        display: none;
    }

    &.is-tel .vue-tel-input {
        border-radius: 0.625rem;

        .vti__dropdown {
            border-top-left-radius: 0.625rem;
            border-bottom-left-radius: 0.625rem;
        }
    }

    /**
     * Label styles
     */

    &.has-label &__element {
        @apply pt-4 pb-2;

        &::placeholder {
            opacity: 0;
        }

        &:not([readonly]):focus::placeholder {
            @apply text-mono-400 opacity-100;
        }
    }

    &.is-filled &__element::placeholder {
        @apply text-mono-400;
    }

    &__label {
        @apply absolute text-mono-400 truncate;
        max-width: calc(100% - 0.75rem);
        left: theme('spacing.3', 0.75rem);
        top: theme('spacing.3', 0.75rem);
        transform-origin: left top;
        transition: 100ms transform ease-out-sine;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    &__label--required:after {
        @apply text-error;
        content: '*';
    }

    &.is-filled &__label--required:after {
        color: inherit;
    }

    &__element:not([readonly]):focus + &__label,
    .is-filled &__element + &__label {
        transform: scale(0.67) translateY(-50%);
    }

    /**
     * Icon styles
     */

    &.has-icon &__element {
        @apply pr-12;
    }

    &.has-icon &__label {
        max-width: calc(100% - theme('spacing.12'));
    }

    &__icon {
        @apply absolute right-0 top-0 rounded-r h-full;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__icon svg {
        fill: currentColor;
    }

    /**
     * Error styles
     */

    &.has-error {
        animation: 700ms aw-shake ease-out-quad;
    }

    &.has-error {
        @apply border-error;

        &__label {
            @apply text-error opacity-100;
        }
    }

    /**
     * Prefix styles
     */

    &.has-prefix &__element {
        @apply rounded-l-none;
    }

    &.has-postfix &__element {
        @apply rounded-r-none;
    }

    /**
     * Disabled style
     */

    &__element[disabled],
    &__element[disabled] + &__label {
        @apply bg-mono-900 text-mono-400;
        cursor: not-allowed;
        user-select: none;
    }

    &.is-disabled {
        @apply bg-mono-900;

        pointer-events: none;

        .aw-text-field__prefix {
            @apply bg-mono-900;
        }
    }

    .aw-button.theme-icon {
        height: 100%;
    }
}

.is-disabled .aw-text-field__fake-input {
    @apply bg-mono-900 text-mono-400;
}

.is-disabled .aw-text-field__element--fake {
    @apply bg-mono-900;
}

@keyframes autoFillStart {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@keyframes autoFillEnd {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}