@mixin m3-text-field-fieldset-legend
    border-top-width: 0
    border-style: solid
    border-bottom-width: 0
    border-color: transparent

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

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

    &:is(.filled, .outlined) > input::placeholder, & > input, & > label
        @include m3-typography-mixin('body-large')

    & + span.m3-text-field-supporting-text
        @include m3-typography-mixin('body-small')

        display: flex
        margin: 4px 16px 2px 16px
        color: var(--md-sys-color-on-surface-variant)

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

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

    & > span.m3-icon
        width: 24px
        margin: 12px
        font-size: 24px
        align-self: end
        cursor: pointer
        display: inherit
        line-height: 24px
        position: absolute
        align-items: center
        justify-content: inherit
        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%
        position: absolute
        pointer-events: none

    & > 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

            align-items: center
            display: inline-flex
            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
            @include m3-typography-mixin('body-small')

            transform: translate(12px, -12px)

        & > 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
            inset: -7.5px 0px 0px 0px
            border: 1px solid var(--md-sys-color-outline)
            transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

            & > legend > span
                width: 100%

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

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

        & > 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
            @include m3-text-field-fieldset-legend

            border-inline-width: 5.5px

        &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
            @include m3-text-field-fieldset-legend

            border-inline-width: 7.5px

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

        & > label.raised, & > fieldset > *
            @include m3-typography-mixin('body-small')

        & > 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)
