/* ==========================================================
   ÉLAN Buttons
   Version: 1.0.0
========================================================== */

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    min-height: 52px;

    padding: .875rem 1.75rem;

    border: none;

    border-radius: var(--radius-full);

    background: transparent;

    color: inherit;

    font: inherit;

    font-weight: var(--font-weight-medium);

    text-decoration: none;

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

}

/* ==========================================================
   STATES
========================================================== */

.btn:hover {

    transform: translateY(-2px);

}

.btn:active {

    transform: scale(.98);

}

.btn:disabled,
.btn[disabled] {

    opacity: .45;

    cursor: not-allowed;

    pointer-events: none;

}

.btn:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 3px;

}

/* ==========================================================
   PRIMARY
========================================================== */

.btn--primary {

    background: var(--color-primary);

    color: var(--color-white);

    box-shadow: var(--shadow-md);

}

.btn--primary:hover {

    box-shadow: var(--shadow-lg);

}

/* ==========================================================
   SECONDARY
========================================================== */

.btn--secondary {

    background: transparent;

    color: var(--color-text);

    border: 1px solid rgba(0,0,0,.12);

}

.btn--secondary:hover {

    background: rgba(0,0,0,.04);

}

/* ==========================================================
   GHOST
========================================================== */

.btn--ghost {

    background: transparent;

    color: var(--color-text-light);

}

.btn--ghost:hover {

    background: rgba(0,0,0,.05);

}

/* ==========================================================
   OUTLINE
========================================================== */

.btn--outline {

    background: transparent;

    border: 1px solid currentColor;

    color: var(--color-text);

}

.btn--outline:hover {

    background: rgba(0,0,0,.04);

}

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

.btn__icon {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    display: block;

}

.btn__label {

    display: inline-block;

}

/* ==========================================================
   SIZES
========================================================== */

.btn--sm {

    min-height: 42px;

    padding: .625rem 1rem;

    font-size: .875rem;

}

.btn--lg {

    min-height: 60px;

    padding: 1rem 2.25rem;

    font-size: 1rem;

}

/* ==========================================================
   FULL WIDTH
========================================================== */

.btn--block {

    display: flex;

    width: 100%;

}

/* ==========================================================
   LOADING
========================================================== */

.btn.is-loading {

    position: relative;

    color: transparent;

}

.btn.is-loading::after {

    content: "";

    position: absolute;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,.35);

    border-top-color: currentColor;

    animation: button-spin .8s linear infinite;

}

/* ==========================================================
   BUTTON GROUP
========================================================== */

.btn-group {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 640px) {

    .btn {

        width: 100%;

    }

}