/*
 * Path: /databass/css/230-sort.css
 * ------------------------------------------------------------
 * Sorting Header UI
 *
 * Features:
 *  - Caret hidden on load
 *  - 0.3 opacity caret on hover when in NONE state
 *  - 1.0 opacity when active (ASC or DESC)
 *  - DESC rotates caret 180° (instant)
 *  - Sort-order number sits INSIDE the caret and stays upright
 *  - Left/right placeholder slots maintained for symmetry
 */

/* ---------------------------------------------
   Header layout structure
--------------------------------------------- */

.databass-th {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.databass-th-left,
.databass-th-right {
    width: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.databass-th-label {
    text-align: center;
    margin: 0 0.3rem;
}

/* ---------------------------------------------
   Caret base styling
--------------------------------------------- */

.databass-th-caret {
    position: relative;
    font-size: 1.5rem;          /* large enough to contain a number */
    line-height: 1;
    opacity: 0;                 /* hidden by default */
    visibility: hidden;         /* fully invisible */
    transform: rotate(0deg) translateY(-0.15rem);    /* default ASC orientation */
    transition: opacity 0.15s ease;
}

/* ---------------------------------------------
   Hover ghost caret (NONE state)
--------------------------------------------- */

th:hover .databass-th-caret.none {
    visibility: visible;
    opacity: 0.3;
}

/* ---------------------------------------------
   Active caret states (ASC / DESC)
--------------------------------------------- */

.databass-th-caret.active.asc {
    visibility: visible !important;
    opacity: 1 !important;
    transform: rotate(0deg) translateY(-0.15rem); /* normal caret */
}

.databass-th-caret.active.desc {
    visibility: visible !important;
    opacity: 1 !important;
    transform: rotate(180deg) translateY(0rem); /* flipped caret */
}

/* ---------------------------------------------
   Sort-order number (inside caret)
   - Centered
   - Remains upright even when caret is flipped
--------------------------------------------- */

.sort-order-num {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--databass-color-primary);
    transform: translate(-50%, -30%) rotate(0deg);
    pointer-events: none;
}

/* When DESC flips caret, rotate number back to upright */
.databass-th-caret.active.desc .sort-order-num {
    transform: translate(-60%, -30%) rotate(180deg);
}