/*
 * Path: /databass/css/400-select.css
 * ------------------------------------------------------------
 * Standardised <select> elements for DataBass.
 * Used in footer (per-page), controls, and any table view.
 */

/* ------------------------------------------------------------
   BASE SELECT
------------------------------------------------------------ */

.databass-table-view select,
.databass-footer select,
.databass-per-page select {
    display: block;
    font-size: 0.8rem;

    padding: 0.5rem;
    margin: 0.5rem;

    border: 1px solid transparent;
    border-radius: var(--databass-border-radius);

    background: var(--databass-color-white);
    box-shadow: var(--databass-shadow-button);

    text-align: center;
    width: fit-content;

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

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

.databass-table-view select:hover,
.databass-footer select:hover,
.databass-per-page select:hover {
    background-color: var(--databass-color-secondary);
    color: var(--databass-color-primary) !important;
    font-weight: 800;

    transform: scale(1.1);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.databass-table-view select:focus,
.databass-footer select:focus,
.databass-per-page select:focus {
    outline: none;
}