/* =========================================
   TWNN Workbook
   ========================================= */

.twnnWorkbook {
    width: 100%;
    min-width: 0;
}

.twnnWorkbook .sheets {
    width: 100%;
    min-width: 0;
}

/* ------------------------------
   Sheet buttons
------------------------------ */

.twnnWorkbook > .sheetButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    background: #1f2225;
    border-bottom: 1px solid #3a3f44;
}

.twnnWorkbook .sheetButton {
    padding: 0.35rem 0.7rem;
    border: 1px solid #454b50;
    border-radius: 4px;
    background: #292d31;
    color: #c7ccd1;
    font: inherit;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease;
}

.twnnWorkbook .sheetButton:hover {
    background: #34393e;
    border-color: #5a6269;
    color: #fff;
}

.twnnWorkbook .sheetButton.active {
    background: #2f7d32;
    border-color: #459748;
    color: #fff;
}

.twnnWorkbook .sheetButton.active:hover {
    background: #378d3a;
    border-color: #50a653;
}

.twnnWorkbook .sheetButton:focus-visible {
    outline: 2px solid #6aaa6d;
    outline-offset: 2px;
}

.twnnWorkbook .sheetButton.is-filtered,
.twnnWorkbook .sheetButton.is-filtered:hover,
.twnnWorkbook .sheetButton.active.is-filtered,
.twnnWorkbook .sheetButton.active.is-filtered:hover {
    border-color: #ff5c69;
}

.twnnWorkbook .sheetButton.is-filtered::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 0.72rem;
    height: 0.72rem;
    background: #ff5c69;
    clip-path: polygon(0 0, 100% 0, 62% 45%, 62% 78%, 38% 100%, 38% 45%);
}

/* ------------------------------
   Workbook content
------------------------------ */

.twnnWorkbook > .sheets {
    min-width: 0;
}