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

Space Vanta Theme 1.0

Featured Functions

File:
public/header/featured-functions/base.css

Phase:
Interaction Framework 1.0

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


:root {

    --sv-featured-fast:
        180ms cubic-bezier(.22, .61, .36, 1);

    --sv-featured-base:
        280ms cubic-bezier(.22, .61, .36, 1);

    --sv-featured-panel:
        420ms cubic-bezier(.22, .61, .36, 1);

    --sv-featured-transition:
        1680ms cubic-bezier(.22, .61, .36, 1);

}


/* =================================================
   FEATURED FUNCTIONS
   ================================================= */

.sv-featured-functions {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


/* =================================================
   FUNCTION
   ================================================= */

.sv-featured-function {

    position:
        relative;

    min-width:
        0;

}


/* =================================================
   TRIGGER
   ================================================= */

.sv-featured-trigger {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        32px;

    padding:
        0 7px;

    margin:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    font:
        inherit;

    cursor:
        pointer;

    text-decoration:
        none;

    -webkit-tap-highlight-color:
        transparent;

}


/* =================================================
   TRIGGER ICON
   ================================================= */

.sv-featured-trigger__icon {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        26px;

    flex:
        0 0 36px;

}


/* =================================================
   TRIGGER LABEL
   ================================================= */

.sv-featured-trigger__label {

    display:
        inline-block;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        .08em;

    white-space:
        nowrap;

}


/* =================================================
   PANEL
   ================================================= */

.sv-featured-panel {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


/* =================================================
   PANEL OPEN
   ================================================= */

.sv-featured-panel[data-featured-state="open"] {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* =================================================
   PANEL CONTENT
   ================================================= */

.sv-featured-panel__content {

    position:
        relative;

    min-height:
        320px;

}


/* =================================================
   PANEL BODY
   ================================================= */

.sv-featured-panel__body {

    position:
        relative;

}


/* =================================================
   CLOSE
   ================================================= */

.sv-featured-panel__close {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    z-index:
        3;

    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    cursor:
        pointer;

}


/* =================================================
   FUTURE CONTENT
   ================================================= */

.sv-featured-panel__future-content {

    min-height:
        80px;

}