/*
|--------------------------------------------------------------------------
| MKGO - Button Components
|--------------------------------------------------------------------------
|
| File:
| /assets/css/components/buttons.css
|
*/

.site-primary-button,
.site-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 11px 18px;

    border-radius: 12px;

    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;

    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| Primary Button
|--------------------------------------------------------------------------
*/

.site-primary-button {
    border: 1px solid #0f172a;

    background: #0f172a;

    color: #ffffff;
}

.site-primary-button:hover {
    border-color: #1e293b;

    background: #1e293b;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.14);
}


/*
|--------------------------------------------------------------------------
| Secondary Button
|--------------------------------------------------------------------------
*/

.site-secondary-button {
    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #0f172a;
}

.site-secondary-button:hover {
    border-color: #94a3b8;

    background: #f8fafc;

    color: #0f172a;

    transform: translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| Text Link
|--------------------------------------------------------------------------
*/

.site-text-link {
    color: #0f172a;

    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: #cbd5e1;
    text-underline-offset: 4px;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

.site-text-link:hover {
    color: #0f172a;

    text-decoration-color: #0f172a;
}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.site-primary-button:focus-visible,
.site-secondary-button:focus-visible,
.site-text-link:focus-visible {
    outline: 3px solid rgba(15, 23, 42, 0.18);
    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Disabled
|--------------------------------------------------------------------------
*/

.site-primary-button:disabled,
.site-secondary-button:disabled,
.site-primary-button[aria-disabled="true"],
.site-secondary-button[aria-disabled="true"] {
    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;

    box-shadow: none;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

    .site-primary-button,
    .site-secondary-button,
    .site-text-link {
        transition: none;
    }

}