.base {
    backdrop-filter: var(--backdrop-filter);
    min-height: var(--static-space-56);

    &.focused, &.filled {
        background-color: var(--neutral-background-strong);
        border-color: var(--neutral-border-medium);
    }

    &:focus-within, &:hover:not(:has(.suffix:hover)) {
        background-color: var(--neutral-alpha-medium);
    }

    &:has(.labelAsPlaceholder) {
        min-height: var(--static-space-48);
    }
}

.textareaBase {
    &::after {
        pointer-events: none;
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--static-space-32);
        height: var(--static-space-32);
        border: 1px solid var(--neutral-border-strong);
        transform: translateX(50%) translateY(50%) rotate(45deg);
        background-color: var(--neutral-alpha-weak);
    }

    ::-webkit-resizer {
        display: none;
    }
}

.label {
    position: absolute;
    left: var(--static-space-16);
    transition: transform 0.3s, top 0.3s, left 0.3s;
    color: var(--neutral-on-background-medium);
    pointer-events: none;
    transform-origin: left;
}

.inputLabel {
    top: 50%;
    transform: translateY(-50%);

    &.floating {
        transform: scale(0.75);
    }
}

.textareaLabel {
    top: var(--static-space-16);

    &.floating {
        transform: scale(0.75) translateY(calc(-1 * var(--static-space-16)));
    }
}

.s {
    min-height: var(--static-space-48);

    &:has(.labelAsPlaceholder) {
        min-height: var(--static-space-40);
    }

    .label {
        &.floating {
            top: var(--static-space-4);
        }
    }
}

.m {
    .label {
        &.floating {
            top: calc(var(--static-space-8) - var(--static-space-2));
        }
    }
}

.input {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    color: var(--neutral-on-background-strong);
    padding: 0 var(--static-space-16);
    outline: none;

    &.labelAsPlaceholder {
        padding-top: 0;
    }

    &:not(.labelAsPlaceholder) {
        padding-top: var(--static-space-16);
    }

    &.labelAsPlaceholder.hasChildren {
        padding-top: var(--static-space-16);
    }

    &::placeholder {
        color: var(--neutral-on-background-weak);
    }

    &:disabled {
        background-color: var(--neutral-solid-strong);
        color: var(--neutral-on-solid-weak);
    }

    &:autofill, &:-webkit-autofill {
        background-color: var(--static-transparent) !important;
        -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-medium) inset !important;
        -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
    }
}

.error {
    .base {
        background-color: var(--danger-background-medium);
        border-color: var(--danger-border-medium);
    }

    .input, .prefix, .suffix {
        color: var(--danger-on-background-medium);
    }

    .label {
        color: var(--danger-on-background-weak);
    }
}

.prefix, .suffix {
    align-self: center;
}

.input[type="color"] {
    opacity: 0;
}