/* ========================
Name: 		components.css
Written by: Kabasakal
======================== */

/* ======================================================
BUTTONS
Variants: (ks-btn, ks-btn-outline, ks-btn-ghost, xs-sm-md-lg-xl)
Usage:      <a href="" class="ks-btn">Gönder</a> (default)
            <button class="ks-btn ks-btn-secondary ks-btn-outline ks-btn-xs">Gönder</button>
====================================================== */

/* Base */

.ks-btn {
    --btn-bg: var(--primary);
    --btn-color: var(--light);
    --btn-border: 2px solid var(--btn-bg);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.5em 1.8em;

    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--body-line-height);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: var(--btn-border);

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

    cursor: pointer;
    text-decoration: none;

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

/* States */
.ks-btn:hover:not(.ks-btn-gradient),
.ks-btn:focus:not(.ks-btn-gradient),
.ks-btn:active:not(.ks-btn-gradient) {
    background: transparent;
    color: var(--btn-bg);
    outline: none;
    box-shadow: none;
}

/* Colors */
.ks-btn-secondary {
    --btn-bg: var(--secondary);
}
.ks-btn-dark {
    --btn-bg: var(--dark);

}
.ks-btn-light {
    --btn-bg: var(--light);
    --btn-color: var(--dark);
}
.ks-btn-gradient {
    --btn-bg: var(--gradient-primary);
}

/* Variants */
.ks-btn-outline {
    --btn-color: var(--btn-bg);
    background: transparent;
}
.ks-btn-ghost {
    --btn-color: var(--btn-bg);
    --btn-border: 1px solid var(--btn-bg);
    background: transparent;
}

/* Sizes */
.ks-btn-xs { font-size: var(--text-xs); }
.ks-btn-sm { font-size: var(--text-sm); }
.ks-btn-md { font-size: var(--text-md); }
.ks-btn-lg { font-size: var(--text-lg); }
.ks-btn-xl { font-size: var(--text-xl); }

/* Block Button */
.ks-btn-block {
    display: flex;
    width: 100%;
}

/* Disabled Button */
.ks-btn:disabled,
.ks-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}