/*
================================================

Space Vanta Theme 1.0

Feature:
Featured Functions / Find

Module:
Find Controls

Version:
FIND-BRAND-CONTROLS-001

Responsibility:
- Close control
- Search control
- What's More control
- Control interaction

================================================
*/


/* =========================================================
   01. CLOSE
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__close {

    position:
        absolute;

    top:
        24px;

    right:
        28px;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    padding:
        0;

    border:
        1px solid rgba(77, 94, 101, 0.34);

    border-radius:
        2px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 253, 0.86),
            rgba(210, 215, 215, 0.72));

    color:
        rgba(48, 59, 64, 0.86);

    font-family:
        inherit;

    font-size:
        19px;

    font-weight:
        300;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        0 8px 24px rgba(43, 52, 56, 0.08);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


.sv-featured-panel--find .sv-featured-panel__close::before {

    content:
        "";

    position:
        absolute;

    top:
        4px;

    left:
        5px;

    right:
        5px;

    height:
        1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.80),
            transparent);

    pointer-events:
        none;
}


.sv-featured-panel--find .sv-featured-panel__close:hover {

    border-color:
        rgba(69, 95, 106, 0.58);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 253, 0.96),
            rgba(193, 202, 205, 0.88));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 10px 28px rgba(43, 53, 58, 0.13);

    transform:
        translateY(-1px);
}


.sv-featured-panel--find .sv-featured-panel__close:focus-visible,

.sv-featured-panel--find .sv-find-discovery__submit:focus-visible,

.sv-featured-panel--find .sv-find-discovery__more-button:focus-visible {

    outline:
        2px solid rgba(77, 108, 121, 0.62);

    outline-offset:
        3px;
}


/* =========================================================
   02. SEARCH BUTTON
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__submit {

    position:
        relative;

    flex:
        0 0 auto;

    min-width:
        112px;

    margin:
        4px;

    padding:
        0 22px;

    border:
        1px solid rgba(67, 84, 92, 0.60);

    background:
        linear-gradient(135deg,
            #8C999E 0%,
            #65747B 38%,
            #3E4C53 72%,
            #75858B 100%);

    color:
        #F8F9F7;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.20em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(31, 42, 47, 0.28),
        0 7px 22px rgba(45, 57, 63, 0.14);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}


.sv-featured-panel--find .sv-find-discovery__submit::before {

    content:
        "";

    position:
        absolute;

    left:
        10px;

    right:
        10px;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.52),
            transparent);

    pointer-events:
        none;
}


.sv-featured-panel--find .sv-find-discovery__submit:hover {

    border-color:
        rgba(52, 74, 84, 0.76);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -1px 0 rgba(31, 42, 47, 0.32),
        0 10px 28px rgba(45, 57, 63, 0.18);

    transform:
        translateY(-1px);
}


.sv-featured-panel--find .sv-find-discovery__submit:active {

    transform:
        translateY(0);
}


/* =========================================================
   03. WHAT'S MORE
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__more-button {

    position:
        relative;

    min-height:
        42px;

    padding:
        0 26px;

    border:
        1px solid rgba(72, 94, 103, 0.40);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 253, 0.62),
            rgba(202, 209, 210, 0.42));

    color:
        rgba(53, 70, 77, 0.92);

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        0 6px 20px rgba(53, 63, 67, 0.055);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


.sv-featured-panel--find .sv-find-discovery__more-button::before {

    content:
        "";

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    top:
        -1px;

    height:
        1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(90, 117, 128, 0.40),
            transparent);
}


.sv-featured-panel--find .sv-find-discovery__more-button:hover {

    border-color:
        rgba(64, 91, 102, 0.64);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 253, 0.82),
            rgba(190, 201, 203, 0.58));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 9px 26px rgba(53, 63, 67, 0.10);

    transform:
        translateY(-1px);
}


/* =========================================================
   04. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-featured-panel--find .sv-featured-panel__close {

        top:
            16px;

        right:
            16px;

        width:
            38px;

        height:
            38px;

        font-size:
            18px;
    }


    .sv-featured-panel--find .sv-find-discovery__submit {

        min-width:
            78px;

        padding:
            0 14px;

        font-size:
            9px;

        letter-spacing:
            0.16em;
    }

}