div.m3.m3-text-field
    position: relative
    display: flex
    justify-content: center
    flex-direction: column
    box-sizing: border-box
    margin: 0

    span.m3-icon.icon-before
        align-self: start

    &:is(.filled, .outlined) > input::placeholder, & > input, & > label
        line-height: var(--md-sys-typescale-body-large-line-height)
        font-size: var(--md-sys-typescale-body-large-font-size)

    & + span.m3-text-field-supporting-text
        display: flex
        line-height: var(--md-sys-typescale-body-small-line-height)
        font-size: var(--md-sys-typescale-body-small-font-size)
        color: var(--md-sys-color-on-surface-variant)
        margin: 4px 16px 2px 16px

    & > label
        padding-inline: 4px
        pointer-events: none
        transform: translate(16px, 0)
        transition: .2s cubic-bezier(0.2, 0, 0, 1)
        position: absolute

    & > input
        transition: .2s cubic-bezier(0.2, 0, 0, 1)
        background-color: transparent
        border: none

    & > span.m3-icon
        position: absolute
        align-self: end
        margin: 12px
        width: 24px
        line-height: 24px
        font-size: 24px
        display: inherit
        align-items: center
        justify-content: inherit
        cursor: pointer
        color: var(--md-sys-color-on-surface-variant)
        font-family: Material-Symbols-Outlined-Regular, serif

    & > span.m3-text-field-state-layer
        width: 100%
        height: 100%
        pointer-events: none
        position: absolute

    & > input, & > label
        color: var(--md-sys-color-on-surface)

    &:is(.filled, .outlined) > input::placeholder
        color: var(--md-sys-color-on-surface-variant)

    &:is(.filled, .outlined) > input:focus-visible
        outline: none
        caret-color: var(--md-sys-color-primary)

    &:is(.filled, .outlined):has(input:disabled)
        & > *, & + span.m3-text-field-supporting-text
            opacity: 38%

    &.filled
        contain: content
        border-radius: 4px 4px 0 0

        & > input
            &.with-after-icon
                padding: 24px 48px 8px 16px

            &.with-before-icon
                padding: 24px 16px 8px 48px

            &.with-before-icon + label
                margin-left: 32px

            &:not(.with-after-icon, .with-before-icon)
                padding: 24px 16px 8px

            &.with-after-icon.with-before-icon
                padding: 24px 48px 8px 48px

            display: inline-flex
            align-items: center
            box-sizing: border-box
            border-radius: 4px 4px 0 0
            background-color: var(--md-sys-color-surface-container-highest)
            box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)

        & > label.raised
            transform: translate(12px, -12px)
            line-height: var(--md-sys-typescale-body-small-line-height)
            font-size: var(--md-sys-typescale-body-small-font-size)

        & > input:required:user-invalid
            caret-color: var(--md-sys-color-error)

            &:focus-visible
                box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
            &
                box-shadow: inset 0 -1px 0 var(--md-sys-color-error)

        &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
            color: var(--md-sys-color-error)

        & > input:focus-visible
            outline-offset: 3px
            box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)

        & > input:focus-visible + label
            color: var(--md-sys-color-primary)

        &:hover
            & > input:not(:disabled) ~ span.m3-text-field-state-layer
                transition: .2s cubic-bezier(0.2, 0, 0, 1)
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)

    &.outlined
        & > fieldset
            margin: 0
            position: absolute
            border-radius: 4px
            pointer-events: none
            padding-inline: 12px
            border: 1px solid var(--md-sys-color-outline)
            inset: -7.5px 0px 0px 0px
            transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

            & > legend > span
                width: 100%

            & > legend
                opacity: 0
                width: 0
                padding: 0
                pointer-events: none
                border: 0 solid transparent
                transition: .05s cubic-bezier(0.2, 0, 0, 1)

            & > legend.raised
                border-inline-width: 6px
                border-style: solid
                border-color: transparent
                width: auto
                visibility: visible

        & > input
            &.with-after-icon
                padding: 16px 48px 16px 16px

            &.with-before-icon
                padding: 16px 16px 16px 48px

            &.with-before-icon + label
                transform: translate(48px, 0)

            &:not(.with-after-icon, .with-before-icon)
                padding: 16px

            &.with-after-icon.with-before-icon
                padding: 16px 48px

            box-sizing: border-box
            border-radius: 4px

        &:has(input:focus-visible) > fieldset
            border: 3px solid var(--md-sys-color-primary)

        &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
            border-top-width: 0
            border-bottom-width: 0
            border-inline-width: 5.5px
            border-style: solid
            border-color: transparent

        &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
            border-top-width: 0
            border-bottom-width: 0
            border-inline-width: 7.5px
            border-style: solid
            border-color: transparent

        & > input:focus-visible + label
            color: var(--md-sys-color-primary)

        & > label.raised, & > fieldset > *
            line-height: var(--md-sys-typescale-body-small-line-height)
            font-size: var(--md-sys-typescale-body-small-font-size)

        & > label.raised
            transform: translate(16px, -27px) !important

        & > input:required:user-invalid
            caret-color: var(--md-sys-color-error)

        &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
            color: var(--md-sys-color-error)

        &:has(input:required:user-invalid) > fieldset
            border: 3px solid var(--md-sys-color-error)

        &:has(input:required:user-invalid:not(:focus-visible)) > fieldset
            border: 1px solid var(--md-sys-color-error)

        &:hover
            &:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
                transition: .2s cubic-bezier(0.2, 0, 0, 1)
                border-color: var(--md-sys-color-on-surface)