@charset "UTF-8";

/* ============================================ */
/* ============== Actions Styles ============== */
/* ============================================ */

.action {
    font-family: var(--ff-primary);
    font-size: var(--fs-body-s);
    font-weight: 700;
    text-align: center;
    line-height: 1.3332;
    display: inline-flex;
    justify-content: center;
    background-color: var(--cl-complementary);
    color: var(--cl-white);
    border: 2px solid var(--cl-complementary);
    border-radius: var(--br-m);
    padding: calc(0.75rem + 1px) 1.75rem calc(0.75rem + 3px) 1.75rem;
    transition: all 200ms ease-in-out;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.25pt;
    width: max-content;
}
.action:hover {
    background-color: var(--cl-rollover);
    border-color: var(--cl-rollover);
}
.action:focus-visible {
    background-color: var(--cl-rollover);
    border-color: var(--cl-rollover);
    outline-style: solid;
    outline-color: var(--cl-primary);
    outline-width: 2px;
    outline-offset: 2px;
}

/*/*/

.action--primary {
    background-color: var(--cl-secondary);
    border-color: var(--cl-secondary);
    color: var(--cl-white);
}
.action--primary:hover {
    background-color: var(--cl-rollover);
    border-color: var(--cl-rollover);
    color: var(--cl-white);
}
.action--primary:focus-visible {
    background-color: var(--cl-rollover);
    border-color: var(--cl-rollover);
    outline-color: var(--cl-primary);
}

/*/*/

.action--outline {
    background-color: transparent;
    color: var(--cl-complementary);
    border-color: var(--cl-complementary);
}
.action--outline:hover {
    background-color: var(--cl-rollover);
    color: var(--cl-white);
    border-color: var(--cl-rollover);
}
.action--outline:focus-visible {
    background-color: var(--cl-rollover);
    color: var(--cl-white);
    border-color: var(--cl-rollover);
    outline-color: var(--cl-primary);
}

/*/*/
@media only screen and (max-width: 1199px) {
    .action {
        font-size: var(--fs-body-l);
        padding: calc(0.75rem + 0px) 1rem calc(0.75rem + 2px) 1rem;
        border-radius: var(--br-s);
    }
}
@media only screen and (max-width: 767px) {
    .action {
        width: 100%;
    }
}