@forward "../shared/shadow-color";
@forward "../shared/workspace";

:where(body:not(.is-popout-window, .is-mobile)) {
    &.fas-status-bar-top {
        .app-container {
            flex-direction: column-reverse;
        }

        .horizontal-main-container {
            position: relative;
        }

        .status-bar {
            position: initial;
            background: none;
        }

        &.is-hidden-frameless:not(.is-fullscreen, .mod-macos) .status-bar {
            margin-right: calc(
                var(--frame-right-space) + var(--size-4-2) + var(--workspace-top-margin) + var(--header-height) - 1px
            );
        }

        &.is-hidden-frameless:not(.is-fullscreen, .mod-macos) .status-bar::before {
            -webkit-app-region: drag;
            content: "";
            height: 100%;
            flex-grow: 1;
        }

        &.is-hidden-frameless:not(.is-fullscreen) .mod-root .workspace-tab-header-container,
        &:not(.is-frameless) .mod-root .workspace-tab-header-container {
            border-top: 0 !important;
            box-sizing: border-box;
        }

        &.is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right::before {
            left: calc(-1 * var(--header-height) + 1px) !important;
            width: calc(var(--header-height) - 1px) !important;
            height: calc(var(--header-height) - 1px) !important;
        }

        &.mod-macos.is-hidden-frameless .sidebar-toggle-button.mod-right {
            position: static;
        }
        &.mod-macos.is-hidden-frameless .workspace .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
            padding-right: 0;
        }
    }

    &.fas-status-bar-default-hover {
        .status-bar {
            --transition-duration: 0.5s;
            --transition-timing-function: ease;
            --border-width: max(15px, var(--radius-m));
            transition-duration: var(--transition-duration), max(0s, calc(var(--transition-duration) - 0.2s));
            transition-timing-function: var(--transition-timing-function);
            transition-property: transform, border;
        }
        .status-bar:not(:hover) {
            transform: translateX(calc(100% - var(--border-width)));
            border-left: var(--color-accent) solid var(--border-width);
            box-shadow: -4px 0px 8px var(--shadow-color);
        }
        .status-bar::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            transition-duration: var(--transition-duration);
            transition-timing-function: var(--transition-timing-function);
            transition-property: left;
            z-index: -1;
        }
    }

    &.fas-status-bar-ribbon {
        --status-bar-radius: 0;
        --status-bar-text-color: var(--workspace-foreground-muted);
        .status-bar {
            right: unset;
            left: 0;
            flex-direction: row;
            height: 50vh;
            width: var(--ribbon-width);

            writing-mode: vertical-rl;
            text-orientation: mixed;
            background: none;
            opacity: var(--icon-opacity-inactive);
        }

        .status-bar-item {
            transform: rotate(180deg);
        }

        .status-bar-item svg {
            transform: rotate(-180deg);
        }

        .workspace-ribbon {
            height: calc(50vh - var(--header-height) + 1px);
        }
    }
}

@media (hover: hover) {
    :where(body:not(.is-popout-window, .is-mobile)) {
        &.fas-status-bar-default-hover {
            .status-bar:hover::before {
                left: 0;
            }
        }

        &.fas-status-bar-ribbon {
            .status-bar:hover {
                border-top: 1px dashed var(--color-base-40);
                opacity: 1;
            }
            .workspace-ribbon:hover {
                border-bottom: 1px dashed var(--color-base-40);
            }
        }
    }
}
