/* ==========================================================
   SERGIO
   File: buttons.css
   Version: 1.3
   Purpose: Shared CTA System
========================================================== */


/* ==========================================================
   BASE
========================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    border: 1px solid transparent;

    color: inherit;
    text-decoration: none;

    font-size: .66rem;
    line-height: 1;
    letter-spacing: .19em;
    text-transform: uppercase;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 350ms ease,
        border-color 350ms ease,
        color 350ms ease,
        transform 350ms cubic-bezier(.23, 1, .32, 1);
}


/* ==========================================================
   DARK BUTTON
========================================================== */

.button--dark {
    min-height: 2.6rem;
    padding: 0 1.15rem;

    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #ffffff;
}


/* ==========================================================
   LIGHT BUTTON
========================================================== */

.button--light {
    min-height: 2.6rem;
    padding: 0 1.15rem;

    background: #ffffff;
    border-color: #ffffff;
    color: #1c1c1c;
}


/* ==========================================================
   FROSTED BUTTON
========================================================== */

.button--frosted {
    min-height: 2.6rem;
    padding: 0 1.15rem;

    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    color: #ffffff;

    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* ==========================================================
   EDITORIAL TEXT LINK
========================================================== */

.button--text {
    min-height: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    gap: 1.75rem;
}

.button--text .button__label {
    padding-bottom: .45rem;

    border-bottom: 1px solid rgba(28, 28, 28, .28);
}


/* ==========================================================
   LIGHT EDITORIAL TEXT LINK
========================================================== */

.button--text-light {
    color: #ffffff;
}

.button--text-light .button__label {
    border-bottom-color: rgba(255, 255, 255, .34);
}


/* ==========================================================
   ARROW
========================================================== */

.button__arrow {
    font-size: .95rem;
    line-height: 1;
    letter-spacing: 0;

    transition:
        transform 400ms cubic-bezier(.23, 1, .32, 1);
}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .button:hover .button__arrow {
        transform: translateX(.3rem);
    }

    .button--dark:hover {
        background: #33312f;
        border-color: #33312f;
    }

    .button--light:hover {
        background: rgba(255, 255, 255, .86);
        border-color: rgba(255, 255, 255, .86);
    }

    .button--frosted:hover {
        background: rgba(255, 255, 255, .22);
        border-color: rgba(255, 255, 255, .52);

        transform: translateY(-1px);
    }

}


/* ==========================================================
   FROSTED FALLBACK
========================================================== */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {

    .button--frosted {
        background: rgba(28, 28, 28, .52);
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .button,
    .button__arrow {
        transition: none;
    }

}