/* Modifications for tab containers */
// The code snippets in this file are derived from the Halcyon theme
// - https://github.com/dbarenholz/halcyon-obsidian?tab=readme-ov-file

body:not(.show-ribbon) {
  .sidebar-toggle-button {
    padding: 11px 16px 7px 0px;
  }

  .sidebar-toggle-button.mod-left {
    padding-top: 16px;
  }
}

body:not(
    .show-ribbon
  ).flexcyon-workspace-card-layout.flexcyon-workspace-cards-tui-ext {
  .sidebar-toggle-button.mod-left {
    padding-top: 9px;
  }
}

body.flexcyon-workspace-card-layout.flexcyon-workspace-cards-tui-ext {
  .sidebar-toggle-button.mod-left {
    padding-top: 7px;
  }
}

body {
  .workspace-ribbon .sidebar-toggle-button {
    top: -1px;
  }
  .sidebar-toggle-button.mod-left {
    padding-top: 12px;
  }
  .sidebar-toggle-button.mod-right {
    padding-top: 9px;
  }
  .workspace-tab-header {
    padding: 0px 4px;
  }

  .workspace-tab-header-inner {
    padding: 2px 9px;
  }

  .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header:is(.mod-active, .is-active)
    > .workspace-tab-header-inner {
    opacity: 1;
  }

  .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header
    > .workspace-tab-header-inner {
    opacity: var(--dimmed);
  }

  .workspace-split:not(.mod-left-split, .mod-right-split)
    .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header-container-inner {
    padding-left: 0px;
    margin-top: 0px;
    margin-left: -10px;
  }

  .workspace-split:not(.mod-left-split, .mod-right-split)
    .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header-inner-title {
    padding-left: 10px;
  }

  .workspace-split:not(.mod-left-split, .mod-right-split)
    .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header-inner-icon {
    padding-right: 0px;
  }

  .workspace-split:not(.mod-left-split, .mod-right-split)
    .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header-container-inner
    > .workspace-tab-header {
    padding: 3px 6px 0;
  }

  .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header:is(.mod-active, .is-active)
    > .workspace-tab-header-inner {
    border-bottom: 1px solid var(--interactive-accent);
  }

  .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header
    > .workspace-tab-header-inner:hover {
    border-bottom: 1px solid var(--interactive-accent);
  }

  .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header
    > .workspace-tab-header-inner {
    border-bottom: 1px solid var(--background-secondary);
  }

  :is(.mod-left-split, .mod-right-split) .workspace-tab-header-container-inner {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    gap: 1px;
    padding-left: 0;
  }

  .workspace-leaf-content {
    width: unset;
  }

  .workspace-leaf {
    background-color: transparent;
  }

  .sidebar-toggle-button.mod-left {
    transform: translateY(-4px);
    background-color: transparent;
    height: unset;
  }
}

body.flexcyon-workspace-card-layout {
  --titlebar-background: transparent;
  --titlebar-background-focused: transparent;

  .workspace-leaf-content {
    border-radius: var(--flexcyon-callout-radix);
  }

  .workspace-leaf-content:not([data-type="markdown"]) {
    margin: 10px;
  }

  .workspace-split:not(.mod-left-split, .mod-right-split) .metadata-container {
    border-radius: var(--flexcyon-callout-radix);
    border: 2px solid var(--color-base-20);

    .metadata-content {
      padding: 0px 8px;
    }
  }

  .workspace-tab-container,
  .workspace-tab-header-container {
    border-radius: var(--flexcyon-callout-radix);
    border: 2px solid var(--color-base-20);
    margin: 4px 8px;
  }

  .workspace-split.mod-vertical.mod-root .workspace-tab-container {
    border: var(--color-base-00);
  }

  .workspace-tabs.mod-active .workspace-tab-header-container {
    border: 2px solid var(--text-on-accent);
  }

  .workspace-split.mod-right-split :last-child .workspace-tab-container {
    margin-bottom: 38px;
  }

  .titlebar {
    margin-top: 4px;
    margin-right: 16px;
  }

  .workspace-ribbon {
    background-color: var(--color-base-00);
    border-right: none;
  }

  .workspace-ribbon.mod-left {
    margin-top: 50px;
    border: none;

    &::before {
      background-color: var(--color-base-00);
    }
  }

  .sidebar-toggle-button.mod-left {
    margin: 8px 0px;
  }

  .sidebar-toggle-button.mod-right {
    margin-top: -2px;
  }

  .side-dock-actions {
    margin-top: 2px;
  }

  .workspace-split
    .workspace-tabs
    .workspace-tab-header-container-inner
    > .workspace-tab-header,
  .workspace-split:not(.mod-left-split, .mod-right-split)
    .workspace-tabs:not(.mod-stacked)
    .workspace-tab-header-container-inner
    > .workspace-tab-header {
    padding: 3px;
    transform: translateX(8px);
  }
}

body.flexcyon-workspace-angled-layout {
  .side-dock-actions,
  .sidebar-toggle-button {
    transform: skewY(-1.5deg);
  }

  .modal-container {
    transform: skewX(-1deg);
  }

  .titlebar-button-container.mod-right,
  .workspace-tab-header-tab-list span.clickable-icon svg,
  span.clickable-icon[aria-label="New tab"] svg,
  .nav-header,
  div.oz-folders-action-items.file-tree-header-fixed,
  div.oz-nav-buttons-right-block,
  div.oz-nav-action-button,
  .workspace-drawer-vault-actions,
  button,
  .workspace-tab-header-container-inner {
    transform: skewX(-7.5deg);
  }
}

body.show-ribbon {
  .sidebar-toggle-button.mod-left {
    height: calc(1.12 * var(--header-height));
    background-color: var(--color-base-00);
  }
  .side-dock-actions {
    margin-top: 0px;
  }
}

@mixin tab-container-style($type, $color, $content) {
  .mod-sidedock
    .workspace-tab-header-container:has(
      .workspace-tab-header.is-active[data-type="#{$type}"]
    )
    + .workspace-tab-container {
    border: 2px solid
      rgba(var(--color-#{$color}-rgb), calc(var(--dimmed) - 0.15));

    &::before {
      content: "#{$content}";
      position: absolute;
      top: 44px;
      left: 32px;
      z-index: 1;
      color: rgba(var(--color-#{$color}-rgb), 0.85);
      background-color: var(--color-base-00);
      padding: 0px 8px;
    }
  }
}

body.theme-dark.flexcyon-workspace-card-layout.flexcyon-workspace-cards-tui-ext {
  @include tab-container-style("file-explorer", "blue", "Files");
  @include tab-container-style(
    "file-tree-view",
    "purple",
    "Alternate File Tree"
  );
  @include tab-container-style("bookmarks", "cyan", "Bookmarks");
  @include tab-container-style("all-properties", "pink", "All Properties");
  @include tab-container-style("outline", "green", "Outline");
  @include tab-container-style(
    "full-calendar-sidebar-view",
    "yellow",
    "Full Calendar | Sidebar"
  );
  @include tab-container-style("backlink", "orange", "Backlinks");
  @include tab-container-style("review-queue-list-view", "red", "Review Queue");
  @include tab-container-style("file-properties", "blue", "Properties");
  @include tab-container-style("outgoing-link", "purple", "Outgoing Links");
  @include tab-container-style("graph", "cyan", "Graph View");
  @include tab-container-style("full-calendar-view", "pink", "Full Calendar");
  @include tab-container-style("localgraph", "green", "Local Graph");
  @include tab-container-style("calendar", "yellow", "Calendar");
}

body.theme-light.flexcyon-workspace-card-layout.flexcyon-workspace-cards-tui-ext {
  @include tab-container-style("file-explorer", "blue", "Files");
  @include tab-container-style(
    "file-tree-view",
    "purple",
    "Alternate File Tree"
  );
  @include tab-container-style("bookmarks", "cyan", "Bookmarks");
  @include tab-container-style("all-properties", "pink", "All Properties");
  @include tab-container-style("outline", "green", "Outline");
  @include tab-container-style(
    "full-calendar-sidebar-view",
    "yellow",
    "Full Calendar | Sidebar"
  );
  @include tab-container-style("backlink", "orange", "Backlinks");
  @include tab-container-style("review-queue-list-view", "red", "Review Queue");
  @include tab-container-style("file-properties", "blue", "Properties");
  @include tab-container-style("outgoing-link", "purple", "Outgoing Links");
  @include tab-container-style("graph", "cyan", "Graph View");
  @include tab-container-style("full-calendar-view", "pink", "Full Calendar");
  @include tab-container-style("localgraph", "green", "Local Graph");
  @include tab-container-style("calendar", "yellow", "Calendar");
}

body.flexcyon-workspace-card-layout.flexcyon-workspace-cards-tui-ext {
  .workspace-split:not(.mod-left-split, .mod-right-split) .metadata-container {
    border: 2px solid rgba(var(--color-purple-rgb), calc(var(--dimmed) - 0.15));
  }

  .metadata-properties-heading {
    position: absolute;
    top: -15px;
    left: 32px;

    * {
      color: rgba(var(--color-purple-rgb), 0.9);
    }

    div.collapse-indicator,
    .metadata-properties-title {
      background-color: var(--color-base-10);
      padding: 0px 8px;
    }
  }

  .metadata-content {
    margin-top: 4px;
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-workspace-pl10k-layout {
  .workspace-split.mod-sidedock .workspace-tab-header.is-active {
    aspect-ratio: cos(30deg);
    clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
  }

  .workspace-split.mod-sidedock .workspace-tab-header.is-active {
    .workspace-tab-header-inner {
      border-bottom: none;
    }
  }
  .view-actions,
  .view-header-left .view-header-nav-buttons {
    border-radius: var(--flexcyon-callout-radix);
    background-color: var(--color-base-20);
    border: 1px solid var(--color-base-20);
    opacity: 1;
    z-index: 10;
    button {
      border-radius: var(--flexcyon-callout-radix);
    }
  }

  .view-actions {
    padding: 4px 2px;
    margin-top: 8px;
    button {
      border-radius: var(--flexcyon-callout-radix);
    }
  }
}

body.flexcyon-vertical-nav .workspace.is-right-sidedock-open {
  .mod-right-split .mod-top {
    .view-content {
      padding-top: 40px;
    }
  }
}
