/*
 * Path: /databass/css/300-buttons.css
 * ------------------------------------------------------------
 * Standard button styles for DataBass UI components.
 * Includes pagination, state, disabled, and icon rules.
 */

/* ------------------------------------------------------------
   BASE BUTTON
------------------------------------------------------------ */

button.databass-button {
    background-color: var(--databass-color-white);
    color: var(--databass-color-primary) !important;

    border: 0;
    border-radius: var(--databass-border-radius);
    box-shadow: var(--databass-shadow-button);

    min-height: 2.5rem;
    min-width: 2.5rem;

    padding: 0;
    margin: 0;

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

    font-weight: 600;
    line-height: 1;
    text-align: center;

    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/* ------------------------------------------------------------
   HOVER / FOCUS
------------------------------------------------------------ */

button.databass-button:hover,
button.databass-button:focus {
    transform: scale(1.1);
    background-color: var(--databass-color-secondary);
    color: var(--databass-color-primary) !important;
    font-weight: 800;
}

/* ------------------------------------------------------------
   DISABLED
------------------------------------------------------------ */

button.databass-button.disabled,
button.databass-button:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;

    background-color: var(--databass-color-grey2);
    color: var(--databass-color-black) !important;
    font-weight: 400;
}

/* ------------------------------------------------------------
   PAGINATION BUTTONS
------------------------------------------------------------ */

button.databass-pagination-button {
    flex: 0 0 auto; /* Prevents layout shift inside flex pagination bar */
}

/* Active/selected page number */
.databass-pagination-button.active {
    background: var(--databass-color-primary) !important;
    color: var(--databass-color-white) !important;
    font-weight: 800;
    transform: scale(1.1);
    pointer-events: none; /* Prevents re-clicking current page */
}

/* Default nav button icons = pink */
.databass-page-first svg,
.databass-page-prev svg,
.databass-page-next svg,
.databass-page-last svg {
    fill: var(--databass-color-primary) !important;
    stroke: var(--databass-color-primary) !important;
}

/* Active numbered page already pink — no change */

/* Hover effect if you want stronger feedback */
.databass-page-first:hover svg,
.databass-page-prev:hover svg,
.databass-page-next:hover svg,
.databass-page-last:hover svg {
    transform: scale(1.2);
}

/* Disabled nav buttons greyed out */
.databass-page-first.disabled svg,
.databass-page-prev.disabled svg,
.databass-page-next.disabled svg,
.databass-page-last.disabled svg {
    fill: var(--databass-color-grey3) !important;
    stroke: var(--databass-color-grey3) !important;
    transform: none !important;
}

/* ------------------------------------------------------------
   ICONS
------------------------------------------------------------ */

.databass-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
}