@forward "../shared/workleaves";
@forward "../shared/workspace";

body {
    --tab-container-background: none;
    --tab-curve: 0;
    --tab-outline-color: var(--color-base-30);
    --tab-outline-width: 0;
    --tab-radius: 0;
    --tab-radius-active: 0;
    --tab-text-color: var(--color-base-40);
    --tab-text-color-active: var(--text-faint);
    --tab-text-color-focused: var(--text-faint);
    --tab-text-color-focused-active: var(--text-muted);
    --tab-text-color-focused-active-current: var(--text-normal);
    --tab-text-color-focused-highlighted: var(--text-accent);
    --sidedock-tab-header-padding-bottom: 0px;
}

// default icon opacity
.workspace-tab-header-container {
    --icon-opacity: var(--icon-opacity-inactive);
    --icon-opacity-hover: 1;
}

@media (hover: hover) {
    // Full opacity when the header container is hovered
    .workspace-tab-header-container:hover {
        --icon-opacity: var(--icon-opacity-hover);
    }
}

// ---------- FILE TABS ----------

.mod-root .workspace-tab-header-container {
    --tab-container-background: var(--workleaves-background);
    --tab-text-color-active: var(--workspace-foreground-faint);
    --tab-text-color-focused: var(--workspace-foreground-faint);
    --tab-text-color-focused-active: var(--workspace-foreground-muted);
    --tab-text-color-focused-active-current: var(--workspace-foreground);
}

.mod-root .workspace-tab-header-container-inner,
.workspace .mod-root .workspace-tab-header {
    padding-top: 0;
}

body.is-hidden-frameless:not(.is-fullscreen) .mod-root .workspace-tab-header-container,
body:not(.is-frameless) .mod-root .workspace-tab-header-container {
    border-top: var(--workspace-top-margin) solid var(--workspace-background);
    box-sizing: content-box;
}
body.is-hidden-frameless:not(.is-fullscreen)
    .mod-root
    .workspace-tab-header:not(.is-active)
    .workspace-tab-header-inner,
body:not(.is-frameless) .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
    padding-top: var(--workspace-top-margin);
}

// Style active tab in non-stack mode

@scope (.mod-root .workspace-tabs:not(.mod-stacked)) {
    .workspace-tab-header.is-active {
        background: none;
        filter: drop-shadow(4px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(-4px 2px 2px rgba(0, 0, 0, 0.15));
    }

    .is-active .workspace-tab-header-inner {
        background-color: var(--workspace-background);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    }

    // Remove cutout corner for first and last tabs
    .is-active:first-child .workspace-tab-header-inner {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    }
    .is-active:last-child .workspace-tab-header-inner {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    }
    .is-active:first-child:last-child .workspace-tab-header-inner {
        clip-path: none;
    }

    // Remove separator before and after active file
    .is-active + .workspace-tab-header .workspace-tab-header-inner::before {
        content: none;
    }

    // Using `:has()` to remove the divider before the active tab is too heavy when the windows need to be repainted
    // So instead, we hide it with another pseuod-element
    .workspace-tab-header + .workspace-tab-header.is-active::before {
        content: "";
        position: absolute;
        inset-inline-start: -0.5px;
        width: 1px;
        background-color: color-mix(in srgb, var(--workleaves-background, var(--background-primary)), black 10%);
        height: 100%;
        top: 4px;
        height: 27px;
    }
}

// ---------- FILE TABS - STACK MODE ----------

.theme-dark .workspace-tabs.mod-stacked {
    --tab-stacked-shadow: -10px 0 10px rgba(0, 0, 0, 0.2);
    --tab-outline-color: var(--color-base-05);
    --tab-color: var(--color-base-05);
    --tab-color-hover: var(--color-base-10);
}

.theme-light .workspace-tabs.mod-stacked {
    --tab-stacked-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    --tab-outline-color: var(--color-base-10);
    --tab-color: var(--color-base-10);
    --tab-color-hover: var(--color-base-20);
}

.workspace-tabs.mod-stacked {
    --tab-outline-width: 1px;
}

.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
    background-color: var(--tab-color);
}

@media (hover: hover) {
    .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header:hover {
        background-color: var(--tab-color-hover);
    }
}

// ---------- NAV HEADER ----------

// Dotted bottom border
.nav-header {
    border-bottom: var(--file-header-border);
}
.is-mobile .nav-header {
    border-top: var(--file-header-border);
    border-bottom: 0;
}
