/* buttons.css */

/* Primary Button */
.btn-primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-color);
    border-color: var(--button-border-color);
}

.btn-primary:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--button-hover-border);
}

.btn-primary:focus, .btn-primary:active {
    background-color: var(--button-active-bg);
    color: var(--button-active-text-color);
    box-shadow: none;
}

.btn-primary:disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text-color);
    opacity: 0.65;
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border-color: var(--button-border-color);
}

.btn-secondary:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--button-hover-border);
}

.btn-secondary:focus, .btn-secondary:active {
    background-color: var(--button-active-bg);
    color: var(--button-active-text-color);
    box-shadow: none;
}

.btn-secondary:disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text-color);
    opacity: 0.65;
}

/* Small Button */
.btn-small {
    padding: 2px 10px;
    font-size: 0.6rem;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid var(--button-small-border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-small:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text-color);
}

.btn-small:focus, .btn-small:active {
    background-color: var(--button-active-bg);
    color: var(--button-active-text-color);
    box-shadow: none;
}

.btn-small:disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text-color);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Pencil Button */
.btn-pencil {
    padding: 1px 2px;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid var(--button-pencil-border);
    background-color: var(--button-pencil-bg);
    color: var(--text-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-pencil:hover {
    background-color: var(--button-pencil-hover-bg);
}

.btn-pencil:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.btn-pencil:active {
    background-color: var(--button-active-bg);
}