/* components/buttons.css */

.ui-button {
    border: 2px solid #000;
    padding: 8px 14px;
}

/* =========================================================
   Icon Button
   ========================================================= */

.icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;

    font-size: 24px;
    line-height: 1;

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

.icon-btn:hover {
    background: var(--gray-100);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.icon-btn:active {
    transform: scale(0.93);
    background: rgba(0,0,0,0.12);
}

.icon-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* =========================================================
   Button Variants
   ========================================================= */

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

.button--secondary:hover {
    opacity: 0.85;
}

/* =========================================================
   Floating Action Button
   ========================================================= */

.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 42px;
    height: 42px;
    border-radius: 9999px;

    background: var(--btn-bg-base);
    color: var(--color-white);

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

    font-size: 24px;
    cursor: pointer;

    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
    z-index: var(--z-mid);
}

.fab:hover {
    background: #2a2a2a;
}

.fab:active {
    background: #151515;
}

.fab:focus-visible {
    outline: 2px solid var(--gray-600);
    outline-offset: 2px;
}

.fab.is-hidden {
    opacity: 0;
    transform: scale(0);
}

.fab.is-visible {
    opacity: 1;
    transform: scale(1);
}