.wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--static-space-8);
    width: 100%;
    height: fit-content;
}

.base {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid var(--neutral-border-medium);
    background-color: var(--static-transparent);
    border-radius: var(--radius-l);
    min-height: var(--static-space-56);
    transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);

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

    &:focus-within, &:hover {
        background-color: var(--neutral-alpha-weak);
    }

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

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

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

.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));
        }
    }
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.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(--neutral-background-strong) !important;
        border-radius: var(--radius-m);
        -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-strong) 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;
}