/* Wabi glassmorphic input styles - adapted from button styles */

.wabi-glass-input-root {
    /* CSS variables */
    --glass-width: auto;
    --glass-height: 48px;
    --glass-surface-padding-inline: 20px;
    --glass-border-width: clamp(1px, .0625em, 4px);
    --glass-shadow-cutoff-fix: 2em;
    --glass-shadow-offset-left: calc(var(--glass-shadow-cutoff-fix) - .875em);
    --glass-text-color: #CDCDCD;
    --glass-font-size: 16px;
    --glass-font-weight: 500;
    --glass-content-blend-mode: normal;
    --glass-surface-background: linear-gradient(-75deg, #0000000d, #00000033, #0000000d);
    --glass-surface-shadow: inset 0 .125em .125em #FFFFFF0d, inset 0 -.125em .125em #00000080, 0 .25em .125em -.125em #FFFFFF33, 0 0 .1em .25em inset #00000033, 0 0 0 0 #000000;
    --glass-surface-shadow-focus: inset 0 .125em .125em #FFFFFF0d, inset 0 -.125em .125em #00000080, 0 .15em .05em -.1em #FFFFFF40, 0 0 .05em .1em inset #00000080, 0 0 0 0 #000000;
    --glass-shadow-background: linear-gradient(180deg, #FFFFFF33, #FFFFFF1a);
    --glass-angle-1: -75deg;

    /* Positioning */
    flex: 1;
    z-index: 2;
    isolation: isolate;
    pointer-events: none;
    background: transparent;
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-flex;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wabi-glass-input-shadow {
    top: calc(0% - var(--glass-shadow-cutoff-fix) / 2);
    left: calc(0% - var(--glass-shadow-cutoff-fix) / 2);
    width: calc(100% + var(--glass-shadow-cutoff-fix));
    height: calc(100% + var(--glass-shadow-cutoff-fix));
    filter: blur(clamp(2px, 0.125em, 12px));
    pointer-events: none;
    transition: filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: absolute;
    overflow: visible;
}

.wabi-glass-input-shadow::after {
    content: "";
    width: calc(100% - var(--glass-shadow-cutoff-fix) - .25em);
    height: calc(100% - var(--glass-shadow-cutoff-fix) - .25em);
    right: 0px;
    bottom: 0px;
    top: calc(var(--glass-shadow-cutoff-fix) - .875em);
    left: var(--glass-shadow-offset-left);
    box-sizing: border-box;
    background: var(--glass-shadow-background);
    opacity: 1;
    border-radius: 12px;
    padding: 0.125em;
    transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: absolute;
    -webkit-mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px;
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) 0px 0px;
}

.wabi-glass-input-surface {
    position: relative;
    pointer-events: auto;
    background: var(--glass-surface-background);
    background-blend-mode: unset;
    border: unset;
    border-radius: 12px;
    box-shadow: var(--glass-surface-shadow);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--glass-height);
    padding-inline: var(--glass-surface-padding-inline);
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-backdrop-filter 0.4s cubic-bezier(0.25, 1, 0.5, 1), backdrop-filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.wabi-glass-input-surface::after {
    content: "";
    z-index: 1;
    width: calc(100% + var(--glass-border-width));
    height: calc(100% + var(--glass-border-width));
    right: 0px;
    bottom: 0px;
    top: calc(0% - var(--glass-border-width) / 2);
    left: calc(0% - var(--glass-border-width) / 2);
    padding: var(--glass-border-width);
    box-sizing: border-box;
    background: conic-gradient(from var(--glass-angle-1) at 50% 50%, #00000080, #00000000 5% 40%, #00000080 50%, #00000000 60% 95%, #00000080), linear-gradient(180deg, #FFFFFF80, #FFFFFF80);
    box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) #FFFFFF80;
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), --glass-angle-1 0.5s;
    position: absolute;
    -webkit-mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px;
    mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) 0px 0px;
}

.wabi-glass-input {
    z-index: 2;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--glass-text-color);
    font-size: var(--glass-font-size);
    font-weight: var(--glass-font-weight);
    mix-blend-mode: var(--glass-content-blend-mode);
    text-shadow: 0 .05em .05em #FFFFFF0d;
    text-align: center;
    font-family: inherit;
    transition: text-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.wabi-glass-input::placeholder {
    color: rgba(205, 205, 205, 0.5);
    font-weight: var(--glass-font-weight);
}

/* Focus states */
.wabi-glass-input:focus {
    text-shadow: rgba(0, 0, 0, 0.06) 0.025em 0.025em 0.025em;
}

.wabi-glass-input-root:focus-within .wabi-glass-input-surface {
    box-shadow: var(--glass-surface-shadow-focus), 0 0 0 3px #ECECEC1f;
}

.wabi-glass-input-root:focus-within .wabi-glass-input-surface::after {
    --glass-angle-1: -125deg;
}