body {
  --header-height: 48px;

  --tab-radius: var(--radius-s);
  --tab-radius-active: var(--tab-radius) var(--tab-radius) 0 0;
  --tab-curve: calc(var(--tab-radius) + 4px);

  --tab-text-color-focused: var(--tab-text-color);
}

body.is-mobile {
  --header-height: 44px !important;
}
body.is-tablet {
  --header-height: 52px !important;
  --view-header-height: 60px !important;
}

// All panels
body:not(.is-mobile) {
  .workspace-ribbon svg.svg-icon,
  .workspace-tab-header-container svg.svg-icon,
  .mod-root .view-header svg.svg-icon,
  .mod-sidedock .nav-action-button svg.svg-icon,
  .modal .modal-close-button::before {
    margin: -1px;
  }
}
body:not(.is-phone) .workspace-tab-header-container {
  background-color: transparent;
  border-bottom: 0;
}

.sidebar-toggle-button {
  height: 100%;
  padding-bottom: 8px;
}
.sidebar-toggle-button .clickable-icon {
  width: fit-content;
  height: auto;
}

// Editor panel
body:not(.is-phone) .workspace .mod-root {
  .workspace-tab-header-container-inner {
    padding: 8px var(--tab-curve) 0;
    margin: 0 -4px 0 0;
    gap: 8px;
  }

  .workspace-tab-header {
    --tab-outline-width: 0;
    padding: 0;
  }

  .workspace-tab-header-inner {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    margin-bottom: 8px;
    height: auto;
  }
  .workspace-tab-header-inner::after {
    content: none;
  }
  .workspace-tab-header-inner-title {
    line-height: normal;
  }

  .workspace-tab-header-new-tab,
  .workspace-tab-header-tab-list {
    display: block;
    align-content: center;
    padding: 4px 0;
    margin: 0;
  }
  .workspace-tab-header-new-tab .clickable-icon,
  .workspace-tab-header-tab-list .clickable-icon {
    height: auto;
    padding: 8px;
  }
}

// Editor panel: Floating
body:is(.tabs-floating, .tabs-floating-center):not(.is-phone) .workspace .mod-root {
  --tab-radius-active: var(--tab-radius);
  --tab-curve: 0;

  .workspace-tab-header-container-inner {
    padding-bottom: 8px;
    gap: 4px;
    margin: 0;
  }
  .workspace-tab-header {
    padding: 0;
  }
  .workspace-tab-header:not(.is-active):not(:hover) {
    opacity: 0.5;
  }
  .workspace-tab-header-inner {
    padding-inline-start: 12px;
    padding-inline-end: 6px;
    margin-bottom: 0;
  }
}
body:is(.tabs-floating, .tabs-floating-center).is-tablet {
  --header-height: 60px !important;

  .mod-root .workspace-tab-header-container-inner {
    padding: 0;
  }
  .mod-root .workspace-tab-header {
    margin: 8px 0;
  }
}

// Editor panel: Floating (Center)
body:not(.is-phone).tabs-floating-center .mod-root .workspace-tabs:not(.mod-stacked) {
  --tab-max-width: var(--tab-width);
  container-type: inline-size;

  @container (min-width: 560px) {
    .workspace-tab-header-container-inner {
      flex: 1;
      justify-content: safe center;
      transition: padding-left var(--anim-duration-moderate) var(--anim-motion-baseline), padding-right var(--anim-duration-moderate) var(--anim-motion-baseline);
    }

    .workspace-tab-header-spacer {
      display: none;
    }
  }
}

body.mod-macos:not(.is-mobile).tabs-floating-center {
  --tab-action-width: 32px;

  .mod-root .workspace-tabs:not(.mod-stacked) {
    @container (min-width: 560px) {
      // Both sidedocks hidden
      &.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
        padding-right: calc(var(--frame-left-space) + calc(--tab-action-width) * 2);
      }
      // Left sidedock hidden
      &.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-right: calc(var(--frame-left-space) - var(--tab-action-width));
      }
      // Right sidedock hidden
      &:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 3);
      }
      // Both sidedocks shown
      &:not(.mod-top-left-space):not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
    }
  }
}

body:not(.mod-macos):not(.is-mobile).tabs-floating-center {
  --tab-action-width: 32px;

  .mod-root .workspace-tabs:not(.mod-stacked) {
    @container (min-width: 560px) {
      // Both sidedocks hidden
      &.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--frame-right-space) + var(--tab-action-width) * 2);
      }
      // Left sidedock hidden
      &.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
      // Right sidedock hidden
      &:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--frame-right-space) + var(--tab-action-width) * 3);
      }
      // Both sidedocks shown
      &:not(.mod-top-left-space):not(.mod-top-right-space).mod-top .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 3);
      }

      // Left sidedock hidden left split pane
      &:is(.mod-root > .workspace-tabs):not(:only-of-type).mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: var(--tab-action-width);
      }
      // Left split pane & Non-top pane
      &:is(.mod-root > .workspace-tabs):not(:only-of-type):first-of-type:not(.mod-top-left-space):not(.mod-top-right-space) .workspace-tab-header-container-inner,
      &:not(.mod-top) .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
    }
  }
}

body.is-tablet.tabs-floating-center {
  --tab-action-width: 44px;

  // Both drawer hidden
  .mod-root .workspace-tabs:not(.mod-stacked) {
    @container (min-width: 560px) {
      // Single pane
      &.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
      // Left pane
      &.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: var(--tab-action-width);
      }
      // Right pane
      &:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 3);
      }
      // Non-top pane
      &:not(.mod-top-left-space):not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
    }
  }
  .workspace-drawer.is-pinned.mod-left + .mod-root .workspace-tabs:not(.mod-stacked) {
    @container (min-width: 560px) {
      // Single pane
      &.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 3);
      }
      // Left pane
      &.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
    }
  }
  .mod-root:has(+ .workspace-drawer.is-pinned.mod-right) .workspace-tabs:not(.mod-stacked) {
    @container (min-width: 560px) {
      // Single pane
      &.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: var(--tab-action-width);
      }
      // Right pane
      &:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
        padding-left: calc(var(--tab-action-width) * 2);
      }
    }
  }
}

// Editor panel: Underline
body:not(.is-phone).tabs-underline .workspace .mod-root {
  --tab-background-active: transparent;

  .workspace-tab-header-container-inner {
    padding-top: 0;
    gap: 0;
  }
  .workspace-tab-header {
    border-bottom: 2px solid transparent;
    padding-top: 8px;
  }
  .workspace-tab-header.is-active {
    border-color: var(--background-modifier-border-focus);
  }
  .workspace-tab-header:not(.is-active):hover {
    border-color: var(--background-modifier-border);

    .workspace-tab-header-inner {
      background-color: transparent;
    }
  }
  .workspace-tab-header-inner {
    margin-bottom: 6px;
  }
}

// Editor panel: Stacks
.tab-stack-top-flipped {
  --tab-stacked-text-transform: rotate(180deg);
  --tab-stacked-text-align: right;
}
.tab-stack-center {
  --tab-stacked-text-align: center;
}
.tab-stack-center-flipped {
  --tab-stacked-text-transform: rotate(180deg);
  --tab-stacked-text-align: center;
}
.tab-stack-bottom {
  --tab-stacked-text-transform: rotate(180deg);
}
.tab-stack-bottom-flipped {
  --tab-stacked-text-align: right;
}
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner {
  flex-direction: var(--tab-stacked-spine-order);
}

// Editor panel: Tablet fix
body.is-tablet {
  .workspace .mod-root {
    .workspace-tab-header-container-inner {
      padding: 0 var(--radius-s);
    }
    .sidebar-toggle-button {
      padding-left: 0;
    }
    .sidebar-toggle-button .clickable-icon {
      margin: auto 0;
    }
    .workspace-tab-header-tab-list .clickable-icon,
    .workspace-tab-header-new-tab .clickable-icon {
      --icon-size: var(--icon-l);
      --icon-stroke: var(--icon-l-stroke-width);
    }
  }
}

// Side panels
.workspace .mod-sidedock {
  .workspace-tab-header-container,
  .workspace-tab-header,
  .workspace-tab-header div {
    transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
  }

  .workspace-tab-header-container {
    padding-block: 8px;
    align-items: center;
  }
  .workspace-tab-header-container-inner {
    -webkit-app-region: no-drag;
    padding: 0 8px 0 0;
    margin: 0;
    gap: calc(8px * var(--density-modifier));
    height: 100%;
  }

  .sidebar-toggle-button {
    position: relative;
    padding: 0;
  }

  .workspace-tab-header {
    --icon-color: var(--text-faint);
    height: calc-size(auto, size);
    line-height: normal;
  }
  .workspace-tab-header.is-active {
    background-color: inherit;
  }
  .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
    background-color: inherit;
  }
  .workspace-tab-header-inner {
    gap: 8px;
  }

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

// Side panels: Compact tabs
body:not(.compact-tabs-off) .workspace .mod-sidedock {
  .workspace-tabs:not(.mod-top) .workspace-tab-header-container:not(:hover) {
    height: calc-size(auto, size);

    .workspace-tab-header {
      background-color: var(--background-modifier-hover);
      height: 4px;
    }

    .workspace-tab-header-inner-icon,
    .workspace-tab-header-inner-title {
      opacity: 0;
    }
  }
}

// Side panels: Tab names
body.labeled-tabs-all {
  --sidebar-tab-text-display: flex;
}
body.labeled-tabs-single .workspace-tab-header:only-child {
  --sidebar-tab-text-display: flex;
}

// Side panels: Platforms
body:not(.mod-macos).is-hidden-frameless .mod-sidedock .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
  padding-right: var(--frame-right-space);
}

body.mod-macos.is-frameless:not(.is-popout-window) .workspace {
  .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
    padding-right: 8px;
  }

  .sidebar-toggle-button.mod-right {
    position: relative;
    padding-right: 0;
  }
}
