/*---------------COLORFUL FRAME--------------*/
/*----------------------------------
This feature is inspired by Kepano's Minimal theme: https://github.com/kepano/obsidian-minimal
None of the original code was used, and was written from scratch.
----------------------------------*/
body {
    --colorful-icon-color: var(--background-secondary);
    --colorful-icon-color-alt: var(--background-secondary-alt);
    --colorful-frame-color: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
}

body.anp-colorful-frame-icon-toggle-light.theme-light,
body.anp-colorful-frame-icon-toggle-dark.theme-dark {
    --colorful-icon-color: var(--text-normal);
    --colorful-icon-color-alt: var(--text-muted);
}

.anp-colorful-frame {
    &.anp-fixed-status-bar {

        &.anp-card-layout,
        &.anp-border-layout {
            .status-bar {
                --status-bar-background: var(--colorful-frame-color);
                --status-bar-text-color: var(--colorful-icon-color);

                .status-bar-item.mod-clickable:hover {
                    color: var(--colorful-icon-color);
                    background-color: rgba(var(--ctp-crust), 0.2);
                }
            }
        }
    }

    &.anp-card-layout .workspace-split.mod-right-split .workspace-tabs,
    &.anp-card-layout .workspace-split.mod-left-split .workspace-tabs,
    &:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-left-split .workspace-tabs.mod-top,
    &:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-right-split .workspace-tabs.mod-top {
        .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
            background-color: rgba(var(--ctp-crust), 0.2);
        }
    }

    &.is-frameless.is-frameless:not(.is-hidden-frameless) {
        .sidebar-toggle-button.mod-left {
            border-radius: 0 var(--radius-m) var(--radius-m) 0;
        }
    }

    &.anuppuccin-accent-toggle.anp-colorful-frame {

        &:not(.anp-card-layout, .anp-border-layout) .mod-top .workspace-tab-header-container,
        &:not(.anp-card-layout, .anp-border-layout) .workspace-ribbon.mod-left:before,
        &.anp-card-layout,
        &.anp-card-layout .workspace-tabs.mod-top,
        &.anp-card-layout .sidebar-toggle-button,
        &.anp-card-layout .workspace-ribbon.mod-left:before {
            --tab-container-background: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
            --titlebar-background: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
        }

        &.anp-card-layout .prompt {
            --background-modifier-hover: rgba(var(--ctp-text), 0.075)
        }
    }

    &.anuppuccin-accent-toggle.anp-colorful-frame,
    &.anp-colorful-frame.anp-colorful-frame.anp-colorful-frame {
        .sidebar-toggle-button {
            --background-modifier-hover: rgba(var(--ctp-text), 0.075);
        }
    }

    &.is-focused .workspace-tabs.mod-stacked .workspace-tab-container {
        .workspace-tab-header-inner {

            .workspace-tab-header-inner-title,
            .workspace-tab-header-inner-close-button {
                color: var(--text-muted);
            }
        }
    }

    .workspace-tabs.mod-stacked .workspace-tab-container {
        .workspace-tab-header-inner {
            .workspace-tab-header-inner-close-button {
                color: var(--text-muted);
            }
        }
    }

    &.is-focused .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active {
        .workspace-tab-header-inner {

            .workspace-tab-header-inner-title,
            .workspace-tab-header-inner-close-button {
                color: var(--color-accent);
            }
        }
    }

    &:not(.anp-card-layout, .anp-border-layout) .mod-top .workspace-tab-header-container,
    &.anp-colorful-frame.anp-card-layout,
    &.anp-colorful-frame.anp-card-layout .workspace-tabs.mod-top,
    &.anp-colorful-frame.anp-card-layout .sidebar-toggle-button,
    &.anp-colorful-frame.anp-card-layout .workspace-ribbon.mod-left:before,
    &:not(.anp-card-layout, .anp-border-layout) .workspace-ribbon.mod-left:before {
        --tab-container-background: hsla(var(--anp-colorful-frame-color-hsl, var(--color-accent-hsl)), var(--anp-colorful-frame-opacity, 1));
        --titlebar-background: hsla(var(--anp-colorful-frame-color-hsl, var(--color-accent-hsl)), var(--anp-colorful-frame-opacity, 1));
        ;
    }

    &.anp-card-layout {
        --divider-color-hover: var(--background-secondary-alt);
    }

    &:not(.anp-card-layout, .anp-border-layout),
    &:not(.anp-card-layout, .anp-border-layout).is-focused {
        .mod-top {
            &:not(.mod-stacked) {

                .workspace-tab-header,
                .workspace-tab-header.is-active,
                .is-focused.workspace-tab-header,
                .workspace-tab-header-container {
                    --tab-text-color: var(--colorful-icon-color-alt);
                    --icon-color: var(--colorful-icon-color-alt);
                    --icon-color-hover: var(--colorful-icon-color);
                    --tab-text-color-focused: var(--colorful-icon-color-alt);
                }
            }

            &.mod-stacked {
                .workspace-tab-header-new-tab .clickable-icon {
                    --icon-color: var(--colorful-icon-color-alt);
                    --icon-color-hover: var(--colorful-icon-color);

                }
            }

            .workspace-tab-header-tab-list,
            .workspace-tab-header-new-tab {

                .clickable-icon,
                .clickable-icon:hover {
                    color: var(--colorful-icon-color-alt);
                }
            }
        }

        &.anp-mini-tab-toggle,
        &.is-focused.anp-mini-tab-toggle {
            .mod-top {

                .workspace-tab-header,
                .workspace-tab-header.is-active {
                    --tab-text-color-focused-active: var(--colorful-icon-color-alt);
                    --tab-text-color-active: var(--colorful-icon-color-alt);
                    --tab-text-color-focused: var(--colorful-icon-color-alt);
                    --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);

                    .workspace-tab-header-inner-close-button {
                        --tab-text-color-focused: var(--colorful-icon-color-alt);
                        --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
                    }
                }

                --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
            }
        }
    }

    &:not(.anp-card-layout, .anp-border-layout) {

        .mod-right-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
        .mod-left-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
        .mod-top .workspace-tab-header-container .clickable-icon.has-active-menu,
        .mod-top .workspace-tab-header-container .clickable-icon:active {
            --icon-color-focused: var(--colorful-icon-color-alt);
        }

        .workspace-tab-header,
        .workspace-tab-header .workspace-tab-header-inner-close-button {
            --tab-text-color-focused: var(--colorful-icon-color-alt);
            --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
        }

        .workspace-tab-header.is-active,
        .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
            --tab-text-color-focused: var(--text-faint);
            --tab-text-color-focused-active-current: var(--text-normal);
        }

        .mod-left-split .mod-top .workspace-tab-header.is-active,
        .mod-right-split .mod-top .workspace-tab-header.is-active {
            background-color: rgba(var(--ctp-crust), 0.2);

            &:hover {
                background-color: rgba(var(--ctp-crust), 0.3);
            }
        }

        &.anp-colorful-frame-icon-toggle-light.theme-light,
        &.anp-colorful-frame-icon-toggle-dark.theme-dark {

            .mod-left-split .mod-top .workspace-tab-header.is-active,
            .mod-right-split .mod-top .workspace-tab-header.is-active {
                background-color: rgba(var(--ctp-text), 0.3);
            }
        }

        &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
        &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title,
        &.is-focused .mod-active:not(.mod-stacked).mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
        &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title,
        .mod-left-split .mod-top .workspace-tab-header:active .workspace-tab-header-inner-icon,
        .mod-right-split .mod-top .workspace-tab-header:active .workspace-tab-header-inner-icon {
            color: var(--colorful-icon-color-alt);
        }
    }

    &.anp-card-layout .mod-vertical .workspace-tabs {
        background-color: var(--tab-container-background);
    }
}

.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).is-focused.anp-mini-tab-toggle .mod-top:not(.mod-stacked) .workspace-tab-header:not(.is-active),
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle .mod-top:not(.mod-stacked) .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner-close-button {
    color: var(--colorful-icon-color-alt);
    --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
}

.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-vertical>*>.workspace-leaf-resize-handle,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-left-split>.workspace-leaf-resize-handle,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-right-split>.workspace-leaf-resize-handle {
    height: calc(100% - var(--header-height));
}

.anp-colorful-frame .sidebar-toggle-button.sidebar-toggle-button {
    background-color: var(--background-primary) !important;
}

.anp-colorful-frame .sidebar-toggle-button {
    padding: var(--size-4-1) !important;
    background-color: var(--background-primary);
    --tab-container-background: var(--background-primary) !important;
    height: calc(var(--header-height) - 5px);
    margin-right: 0;
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: var(--tab-outline-color);
    --icon-color: var(--text-muted);
    --icon-color-hover: var(--text-muted);
    --icon-color-active: var(--text-accent);
    --icon-color-focused: var(--text-normal);

    .clickable-icon {
        --icon-color: var(--text-muted) !important;
        --icon-color-hover: var(--text-muted) !important;
        --icon-color-active: var(--text-accent) !important;
        --icon-color-focused: var(--text-normal) !important;
    }
}

.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle.is-focused .mod-active.mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle.is-focused .mod-active.mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-title {
    color: var(--background-primary);
}

//Fullscreen tweak
.anp-colorful-frame.mod-macos .sidebar-toggle-button.mod-right {
    border-radius: 0 0 0 var(--radius-m);
}

.anp-colorful-frame.is-fullscreen:not(.is-popout-window) .sidebar-toggle-button.mod-left {
    border-radius: 0 0 var(--radius-m) 0;
}

body.anp-colorful-frame.anp-card-layout .workspace,
.anp-colorful-frame.anuppuccin-accent-toggle.anp-card-layout .workspace-tabs {
    background-color: var(--tab-container-background);
}

.anp-colorful-frame.anp-card-layout,
.anp-colorful-frame.anp-card-layout .workspace-tab-container,
.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout:not(.anp-card-layout-filebrowser) .workspace-leaf-content[data-type="file-explorer"] {
    --tab-text-color: var(--background-secondary-alt);
    //--tab-text-color-active: var(--background-secondary-alt);
    --tab-text-color-focused: var(--background-secondary-alt);
    --tab-text-color-focused-active: var(--background-secondary-alt);
    --tab-text-color-focused-highlighted: var(--background-secondary-alt);
    --tab-text-color-focused-active-current: var(--background-secondary-alt);
    --icon-color: var(--background-secondary-alt);
    --icon-color-hover: var(--background-secondary-alt);
    --icon-color-active: var(--background-secondary-alt);
    --icon-color-focused: var(--background-secondary-alt);
}

.anp-colorful-frame.anp-card-layout:not(.anp-card-layout-filebrowser) {

    &.anp-colorful-frame-icon-toggle-light.theme-light,
    &.anp-colorful-frame-icon-toggle-dark.theme-dark {
        .workspace-leaf-content[data-type="file-explorer"] {
            --tab-text-color: var(--text-normal);
            //--tab-text-color-active: var(--text-normal);
            --tab-text-color-focused: var(--text-normal);
            --tab-text-color-focused-active: var(--text-normal);
            --tab-text-color-focused-highlighted: var(--text-normal);
            --tab-text-color-focused-active-current: var(--text-normal);
            --icon-color: var(--text-normal);
            --icon-color-hover: var(--text-normal);
            --icon-color-active: var(--text-normal);
            --icon-color-focused: var(--text-normal);
        }
    }
}

.anp-colorful-frame.anp-card-layout.anp-colorful-frame-icon-toggle-light.theme-light,
.anp-colorful-frame.anp-card-layout.anp-colorful-frame-icon-toggle-dark.theme-dark,
.anp-colorful-frame.anp-card-layout.anp-card-layout-actions .workspace-ribbon,
.anp-colorful-frame.anp-card-layout .workspace-tab-container,
.anp-colorful-frame.anp-card-layout .modal,
.anp-colorful-frame.anp-card-layout .mod-vertical .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout.anp-alternate-tab-toggle .mod-vertical .workspace-tab-header {
    --tab-text-color: var(--text-faint);
    --tab-text-color-active: var(--text-muted);
    --tab-text-color-focused: var(--text-muted);
    --tab-text-color-focused-active: var(--text-muted);
    --tab-text-color-focused-highlighted: var(--text-accent);
    --tab-text-color-focused-active-current: var(--text-normal);
    --icon-color: var(--text-muted);
    --icon-color-hover: var(--text-muted);
    --icon-color-active: var(--text-accent);
    --icon-color-focused: var(--text-normal);
}

.anp-colorful-frame.anp-card-layout:not(.anp-alternate-layout) .workspace-tab-header-status-icon {
    color: var(--icon-color);
}

.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-mini-tab-toggle) .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-mini-tab-toggle) .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
    color: var(--color-accent);
}

.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header .workspace-tab-header-inner-title,
.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header .workspace-tab-header-inner-title,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-dark.theme-dark) .mod-left-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-light.theme-light) .mod-left-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-dark.theme-dark) .mod-right-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-light.theme-light) .mod-right-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
    color: var(--background-secondary-alt);
}

.anp-colorful-frame.anp-card-layout.is-focused {

    &.anp-colorful-frame-icon-toggle-light.theme-light,
    &.anp-colorful-frame-icon-toggle-dark.theme-dark {

        .mod-left-split,
        .mod-right-split {
            .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
                color: var(--text-normal);
            }
        }
    }
}

.anp-colorful-frame.anp-card-layout {

    .mod-left-split,
    .mod-right-split {
        .workspace-tab-container {
            background-color: transparent;
        }
    }

    .mod-left-split {
        background-color: transparent;
    }

    .mod-vertical .workspace-tab-container {
        background-color: transparent;
    }
}

.anp-colorful-frame.anp-card-layout .mod-right-split .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout .mod-left-split .workspace-tab-header.is-active {
    background-color: rgba(var(--ctp-crust), 0.2);

    &:hover {
        background-color: rgba(var(--ctp-crust), 0.3);
    }
}

.anp-colorful-frame.anp-card-layout {

    &.anp-colorful-frame-icon-toggle-light.theme-light,
    &.anp-colorful-frame-icon-toggle-dark.theme-dark {

        .mod-right-split,
        .mod-left-split {
            .workspace-tab-header.is-active {
                background-color: rgba(var(--ctp-text), 0.3);
            }
        }
    }
}

.mod-top .workspace-tab-header-inner::after {
    display: none;
}

.anp-colorful-frame.anp-card-layout:not(.anp-mini-tab-toggle) .mod-vertical .workspace-tab-header.is-active {
    --tab-text-color-focused: var(--text-muted);
    --tab-text-color-focused-active: var(--text-normal);
}

.anp-mini-tab-toggle.anp-colorful-frame .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container-inner .workspace-tab-header.is-active {
    border-bottom: 2px solid var(--background-secondary-alt);
}

.anp-colorful-frame.anp-card-layout .workspace-drop-overlay:before {
    background-color: var(--background-secondary-alt);
    border-radius: var(--radius-m);
    opacity: 0.5;
}

.anp-colorful-frame {
    --titlebar-background: var(--anp-colorful-frame-color, var(--color-accent));
    --titlebar-background-focused: var(--anp-colorful-frame-color, var(--color-accent));
    --titlebar-text-color: var(--background-primary);
    --titlebar-text-color-focused: var(--background-secondary-alt);
}

.anp-colorful-frame.is-frameless:not(.is-hidden-frameless) {

    .sidebar-toggle-button.mod-right,
    .sidebar-toggle-button.mod-left {
        border-radius: var(--radius-m);
    }
}

.anp-colorful-frame:not(.is-frameless) {

    .sidebar-toggle-button.mod-right,
    .sidebar-toggle-button.mod-left {
        border-radius: var(--radius-m);
    }
}

body.anp-colorful-frame.anp-border-layout {
    .horizontal-main-container {
        background-color: var(--colorful-frame-color);
        --titlebar-background: var(--colorful-frame-color);
        --ribbon-background: var(--colorful-frame-color);
        --ribbon-background-collapsed: var(--colorful-frame-color);
        --card-background-color: var(--colorful-frame-color);
    }

    .workspace-ribbon {
        --icon-color: var(--colorful-icon-color);
        --icon-color-hover: var(--colorful-icon-color-alt);
        --icon-color-active: var(--colorful-icon-color-alt);
        --icon-color-focused: var(--colorful-icon-color);

        .clickable-icon:hover {
            background-color: rgba(var(--ctp-crust), 0.2);
        }

        .clickable-icon:active {
            background-color: rgba(var(--ctp-crust), 0.3);
        }
    }

    .workspace-tabs.mod-top {
        .workspace-tab-header-container {
            .clickable-icon {
                --icon-color: var(--colorful-icon-color);
                --icon-color-hover: var(--colorful-icon-color-alt);
                --icon-color-active: var(--colorful-icon-color-alt);
                --icon-color-focused: var(--colorful-icon-color);
            }

            .clickable-icon:hover {
                background-color: rgba(var(--ctp-crust), 0.2);
            }

            .clickable-icon:active {
                background-color: rgba(var(--ctp-crust), 0.3);
            }
        }
    }

    .workspace-split {

        &.mod-right-split,
        &.mod-left-split {
            .workspace-tabs.mod-top {
                >.workspace-tab-header-container {
                    --icon-color: var(--colorful-icon-color);
                    --icon-color-hover: var(--colorful-icon-color-alt);
                    --icon-color-active: var(--colorful-icon-color-alt);
                    --icon-color-focused: var(--colorful-icon-color);

                    .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
                        background-color: rgba(var(--ctp-crust), 0.2);
                    }

                    .workspace-tab-header.is-active .workspace-tab-header-inner {
                        background-color: rgba(var(--ctp-crust), 0.3);
                    }

                    .clickable-icon:hover {
                        background-color: rgba(var(--ctp-crust), 0.2);
                    }

                    .clickable-icon:active {
                        background-color: rgba(var(--ctp-crust), 0.3);
                    }

                    .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
                    .is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
                        color: var(--colorful-icon-color);
                    }
                }
            }
        }
    }

    &.anp-mini-tab-toggle .workspace-tabs.mod-top {

        .workspace-tab-header-inner-title,
        .workspace-tab-header-status-container,
        .workspace-tab-header-inner-close-button,
        .workspace-tab-header-inner-icon {
            color: var(--background-primary);
        }
    }
}