/* =========================================
   CRT DATABASE - FOLDER TABS
   ========================================= */

:root {
    --crt-bg: #090b20;
    --folder-dark: #171744;
    --folder-mid: #25236b;
    --folder-light: #4842a8;

    --purple: #9b7cff;
    --lavender: #c7baff;
    --cyan: #65e8ff;

    --text: #e5e1ff;
}


/* -----------------------------------------
   FOLDER TAB CONTAINER
   ----------------------------------------- */

.folder-tabs {
    display: flex;
    align-items: flex-end;
    gap: 6px;

    width: 100%;

    border-bottom: 2px solid var(--purple);

    padding-left: 20px;
    margin-bottom: 0;
}


/* -----------------------------------------
   INDIVIDUAL FOLDER TAB
   ----------------------------------------- */

.folder-tab {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 24px 9px;

    min-width: 140px;

    color: var(--lavender);
    background: var(--folder-dark);

    border: 1px solid #514cb0;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;

    /* Creates the folder-tab shape */
    border-radius: 5px 5px 0 0;
}


/* Little folder "tab" sticking out */
.folder-tab::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 10px;

    width: 48px;
    height: 7px;

    background: var(--folder-dark);

    border: 1px solid #514cb0;
    border-bottom: none;

    border-radius: 4px 4px 0 0;
}


/* -----------------------------------------
   ICON
   ----------------------------------------- */

.folder-icon {
    color: var(--cyan);

    font-size: 12px;

    text-shadow:
        0 0 5px var(--cyan),
        0 0 10px rgba(101, 232, 255, 0.5);
}


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

.folder-tab:hover {
    color: white;

    background: var(--folder-mid);

    box-shadow:
        0 0 8px rgba(155, 124, 255, 0.35),
        inset 0 0 12px rgba(155, 124, 255, 0.1);
}

.folder-tab:hover::before {
    background: var(--folder-mid);
}


/* -----------------------------------------
   ACTIVE TAB
   ----------------------------------------- */

.folder-tab.active {
    color: white;

    background: #29276f;

    border-color: var(--purple);

    box-shadow:
        0 -2px 10px rgba(155, 124, 255, 0.25),
        inset 0 0 15px rgba(155, 124, 255, 0.08);
}

.folder-tab.active::before {
    background: #29276f;
    border-color: var(--purple);
}

.folder-tab.active .folder-icon {
    color: var(--cyan);

    text-shadow:
        0 0 5px var(--cyan),
        0 0 12px var(--cyan);
}