.input-expand-outer {
    display: flex;
    height: 56px;
    color: var(--color-copper);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
}

/* .desktop .app-menu-links:has(.search-overlay[visible="True"]) .input-expand-outer {
    background-color: rgba(255, 255, 255, 0.9);
} */

.desktop .input-expand-outer.hide-menu {
    background-color: transparent;
}

.input-expand-input {
    width: 0;
    
    transition: width .3s ease-in-out;
    color: currentColor;
    border: 2px solid currentColor;
    border-right: none;
    border-left: none;
    backdrop-filter: blur(8px);
}

.input-expand-outer[input-expanded='True'] .input-expand-input {
    width: calc(72vw - 50px);
    border-left: 2px solid currentColor;
    border-radius: 4px 0 0 4px;
}

.desktop:not(:has(.layout-inner-pinv)) .input-expand-outer.hide-menu .input-expand-input {
    border: unset;
}

/* .desktop .app-menu-links:has(.search-overlay[visible="True"]) .input-expand-outer .input-expand-input {
    border: 2px solid currentColor;
    border-right: none;
} */

.input-expand-input .form-control[data-input] {
    border: unset;
    border-radius: unset;
    height: 100%;
    background-color: transparent;
    font-size: 18px;
}

.desktop .input-expand-outer.hide-menu[input-expanded='True'] .input-expand-input {
    position: relative;
}

/* .desktop .app-menu-links:not(:has(.search-overlay[visible="True"])) .input-expand-outer.hide-menu[input-expanded='True'] .input-expand-input:after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--color-copper);
    position: absolute;
    bottom: 12px;
    left: 0;
} */

.input-expand-outer .input-expand-input input.form-control[data-input]:valid {
    border: none;
    color: var(--color-neutral-9);
}

.input-expand-input .form-control[data-input]::placeholder {
    color: transparent;
    transition: color .5s ease;
    transition-delay: .5s;
}

.input-expand-outer[input-expanded='True'] .input-expand-input .form-control[data-input]::placeholder {
    color: var(--color-primary-blue);
    transition-delay: 0;
}

.input-expand-input .form-control[data-input]:hover, 
.input-expand-input .form-control[data-input]:focus {
    border: unset;
}

.input-expand-icon {
    width: 56px;
    color: currentColor;
    border: 2px solid var(--color-copper);
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative;
    z-index: 2;
    border-radius: 4px;
}

.input-expand-outer[input-expanded='True'] .input-expand-icon::after {
    content: "";
    width: 2px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: var(--color-copper);
    transform: translateY(-50%);
}

/* .desktop .app-menu-links:not(:has(.search-overlay[visible="True"])) .input-expand-outer.hide-menu[input-expanded='True'] .input-expand-icon::after {
    display: none;
} */

.input-expand-outer[input-expanded='True'] .input-expand-icon {
    border-left: 0;
    border-radius: 0 4px 4px 0;
}

.desktop:not(:has(.layout-inner-pinv)) .input-expand-outer.hide-menu .input-expand-icon {
    border: unset;
}

/* .desktop .app-menu-links:has(.search-overlay[visible="True"]) .input-expand-outer .input-expand-icon {
    border: 2px solid var(--color-copper);
    border-left: 0;
} */

.input-expand-outer .input-expand-icon [class^="icon-"], 
.input-expand-outer .input-expand-icon [class*=" icon-"] {
    color: var(--color-copper);
    padding: 6px;
    font-size: 26px;
    font-weight: 700;
}


.phone div[data-block="Custom.InputExpand"],
.tablet div[data-block="Custom.InputExpand"] {
    display: inline-flex;
    justify-content: flex-end;
    padding: 10px;
}

.phone .input-expand-outer[input-expanded='True'] .input-expand-input,
.tablet .input-expand-outer[input-expanded='True'] .input-expand-input {
    width: calc(100vw - 74px);
    z-index: 1;
}

.phone .input-expand-icon,
.tablet .input-expand-icon {
    width: 45px;
    background-color: white;
}

.phone .input-expand-outer,
.tablet .input-expand-outer {
    height: 45px;
}

.tablet .input-expand-outer .input-expand-input .form-control[data-input],
.phone .input-expand-outer .input-expand-input .form-control[data-input] {
    height: 40.5px;
}

.phone .input-expand-outer .input-expand-icon [class^="icon-"],
.phone .input-expand-outer .input-expand-icon [class*=" icon-"],
.tablet .input-expand-outer .input-expand-icon [class^="icon-"],
.tablet .input-expand-outer .input-expand-icon [class*=" icon-"]{
    font-size: 20px;
}

.phone .input-expand-input,
.tablet .input-expand-input {
    background-color: var(--color-white);
    backdrop-filter: unset;
}

.phone .app-menu-links:has(.search-overlay[visible="True"]) .locale-outer,
.tablet .app-menu-links:has(.search-overlay[visible="True"]) .locale-outer {
    display: none;
}