:root{
    --gears-comp-input-filled-label-color : var(--gears-sys-color-on-surface-variant);
    --gears-comp-input-filled-label-populated-color : var(--gears-ref-palette-secondary-30);
    --gears-comp-input-filled-active-indicator-color : var(--gears-sys-color-secondary);
    --gears-comp-input-filled-active-indicator-thickness : 2px;
    --gears-comp-input-filled-active-indicator-thickness-active : 2px;
}

.input-filled {
    display:flex;
    align-items: center;
    z-index: 0;
    position: relative;
    min-height:56px;
    background-color: var(--gears-surfacecontainerlow-color);
    border-radius: var(--gears-sys-shape-corner-extra-small-top);
    border-bottom: var(--gears-comp-input-filled-active-indicator-thickness) solid var(--gears-sys-color-on-surface-variant);
}
.input-filled:focus-within {
    border-bottom: var(--gears-comp-input-filled-active-indicator-thickness-active) solid var(--gears-comp-input-filled-active-indicator-color);
}

.input-filled + small{
    margin-top:4px;
    margin-left: 16px;
    margin-right: 16px;
    color: var(--gears-sys-color-on-surface-variant);
    font-size: var(--gears-sys-typescale-body-small-size);
    font-family: var(--gears-sys-typescale-body-small-font);
    font-weight: var(--gears-sys-typescale-body-small-weight);
    line-height: var(--gears-sys-typescale-body-small-line-height);
}

.input-filled .leading{
    padding-left: 12px;
    flex: 24px 0;
    font-size: 20px;
    text-align: center;
}
.input-filled .trailing{
    padding-right: 12px;
    flex: 24px 0;
    font-size: 20px;
    text-align: center;
}
.input-filled input, .input-filled textarea, .input-filled select{
    flex: 1 1;
    width:100%;
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--gears-surfacecontainerlow-color);
    min-height:56px;
    border-radius: var(--gears-sys-shape-corner-extra-small-top);
    border: none !important;
    color: var(--gears-sys-color-on-surface);
    font-size: var(--gears-sys-typescale-body-large-size);
    font-family: var(--gears-sys-typescale-body-large-font);
    font-weight: var(--gears-sys-typescale-body-large-weight);
    caret-color: var(--gears-comp-input-filled-active-indicator-color);
    line-height: var(--gears-sys-typescale-body-large-line-height);
}

.input-filled textarea{
    margin-top: 24px;
}
.input-filled input:focus, .input-filled textarea:focus, .input-filled select:focus{
    border: none;
    outline: none;
}

.input-filled input + label, .input-filled textarea + label, .input-filled select + label{
    position: absolute;
    top: 28px;
    transform: translateY(-50%);

    left: calc(16px); 
    pointer-events: none; 
    transition: top 0.25s, left 0.25s, font-size 0.25s;

    color: var(--gears-comp-input-filled-label-color);
    font-size: var(--gears-sys-typescale-body-large-size);
    font-family: var(--gears-sys-typescale-body-large-font);
    font-weight: var(--gears-sys-typescale-body-large-weight);
    line-height: var(--gears-sys-typescale-body-large-line-height);
}

.input-filled input::placeholder, .input-filled textarea::placeholder{
    color: var(--gears-sys-color-on-surface-variant);
}

.input-filled select + label,
.input-filled input:not(:placeholder-shown) + label, .input-filled textarea:not(:placeholder-shown) + label, 
.input-filled:focus-within label {
    color:var(--gears-comp-input-filled-label-populated-color);
    top: 12px;
    transform: translateY(-50%);
    left: calc(16px); 
    font-size: var(--gears-sys-typescale-body-medium-size);
    font-family: var(--gears-sys-typescale-body-medium-font);
    font-weight: var(--gears-sys-typescale-body-medium-weight);
    line-height: var(--gears-sys-typescale-body-medium-line-height);
}

.input-filled .leading + input + label{
    margin-left: calc(32px);
}

.input-filled .leading + .prefix + input + label{
    margin-left: calc(32px);
}

.input-filled .prefix {
    opacity: 1;
    padding-top: 8px;
    padding-left:16px;
    width: min-content;
    color: var(--gears-sys-color-on-surface);
    font-size: var(--gears-sys-typescale-body-large-size);
    font-family: var(--gears-sys-typescale-body-large-font);
    font-weight: var(--gears-sys-typescale-body-large-weight);
    caret-color: var(--gears-comp-input-filled-active-indicator-color);
    line-height: var(--gears-sys-typescale-body-large-line-height);
}
.input-filled:focus-within .prefix, .input-filled.focused .prefix, .input-filled.populated .prefix{
    opacity: 1;
}

.prefix + input {
    padding-left: 2px;
}