/* ========================================
   Buttons Component (legacy)
   ======================================== */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-family: var(--font-family-base);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    font-weight: 400;
    padding: 0 12px;
    height: 32px;
    line-height: 30px;
    font-size: 13px;
    color: white;
    box-shadow: none;

    &:hover,
    &:focus {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #ffffff;
    }
}

.d-flex.justify-content-between .btn {
    background: #f7f7f7 !important;
    border: 1px solid #ccc !important;
    color: #555 !important;
    padding: 6px 10px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    text-decoration: none !important;

    &:hover {
        background: #fafafa !important;
        border-color: #999 !important;
        color: var(--text-primary) !important;
    }
}

.d-flex.justify-content-between .btn-primary {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: none !important;

    &:hover {
        background: var(--primary-dark) !important;
        color: white !important;
        border-color: var(--primary-dark) !important;
    }
}
