.sidebar-toggle-button {
  background-color: transparent !important;
}

body.center-tabs-off .mod-root .workspace-tab-header-container-inner {
  justify-content: flex-start !important;
  padding: 0 !important;
}

.mod-root .workspace-tabs {
  container-type: inline-size;
}

body:not(.is-phone) {
  .workspace .mod-root .workspace-tabs {
    .workspace-tab-header-container {
      overflow: hidden;
    }
    .workspace-tab-header-container-inner {
      flex-grow: 1;
    }
    .workspace-tab-header-spacer {
      display: none;
    }
  }
  &:not(.tabs-autosize-off) {
    --tab-width: 100px;

    .workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
      width: calc-size(auto, size);
      min-width: var(--tab-width);

      &.is-active {
        min-width: 200px;
      }
    }
  }
  .workspace .mod-root .workspace-tabs:not(.mod-stacked) {
    .workspace-tab-header {
      flex: unset;
      opacity: 0.5;
      transition: var(--anim-duration-fast) !important;
      container-type: unset;
      border: none;
      background-color: var(--background-modifier-hover);
      padding: 0;

      &::before,
      &::after {
        display: none;
      }

      &.is-active {
        opacity: 1;
        box-shadow: none;
      }
      &.mod-active.is-active {
        @starting-style {
          transform: translateX(-16px);
          width: 0 !important;
          min-width: 0 !important;
        }
      }
      &.mod-active:not(.is-active) {
        min-width: 0 !important;
      }
    }

    .workspace-tab-header-container-inner {
      justify-content: safe center;
      gap: 4px;
      padding: 0;
    }

    .workspace-tab-header-inner {
      padding-inline-start: 12px;
      padding-inline-end: 4px;
    }
    .workspace-tab-header-inner-title {
      flex: unset;
      line-height: normal;
    }
    .workspace-tab-header:not(.is-active):not(.autofit-tab) .workspace-tab-header-inner-title {
      padding-right: 18px;
    }
    .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button,
    .workspace-tab-header:not(.is-active) .workspace-tab-header-status-container {
      position: absolute;
      inset-inline-end: 4px;
    }
    .workspace-tab-header-inner-close-button,
    .workspace-tab-header-status-icon {
      padding: 4px;

      &:hover {
        background-color: var(--background-modifier-hover);
      }
    }
  }

  .workspace .mod-root .workspace-tabs.mod-stacked {
    .workspace-tab-container .workspace-tab-header-inner-close-button {
      padding: 4px 12px;
      min-height: 32px;
      justify-content: center;
      border-radius: var(--clickable-icon-radius);
    }

    .workspace-tab-container .workspace-tab-header-inner {
      padding: 12px;
      gap: 4px;
    }
  }

  .workspace .mod-sidedock {
    --tab-radius: var(--clickable-icon-radius);

    .workspace-tab-header-container-inner {
      -webkit-app-region: no-drag;
      gap: 0px;
      transition: var(--anim-duration-fast);
      padding: 0;
      outline: 2px solid transparent;
    }
    .workspace-tab-header-container-inner:not(:hover) .workspace-tab-header.is-active {
      background-color: transparent;
    }

    .workspace-tab-header-container-inner:hover {
      background-color: var(--background-modifier-hover);
      outline-color: var(--background-modifier-hover);

      .workspace-tab-header.is-active {
        background-color: var(--background-primary);
        box-shadow: var(--shadow-xs);
      }
    }

    .workspace-tab-header {
      border-radius: var(--tab-radius);
      transition: var(--anim-duration-fast);
    }

    .workspace-tab-header-inner {
      width: 40px;
      transition: var(--anim-duration-fast);
    }

    .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:not(:hover) {
      opacity: 0.5;
    }

    &.mod-left-split .sidebar-toggle-button.mod-left {
      order: -1;
    }
  }
}

body:not(.is-mobile) {
  @container (max-width: 480px) {
    .mod-root .workspace-tab-header-container-inner {
      justify-content: flex-start !important;
      padding: 0 !important;
    }
  }

  .workspace-tab-header-container .clickable-icon {
    padding: 4px;
    width: 40px;
    height: 100%;
  }

  .workspace-tab-header-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .workspace-tab-header-container-inner {
    margin: 12px 0;
    position: relative;
    border-radius: var(--tab-radius);
  }

  .workspace-tab-header-new-tab,
  .workspace-tab-header-tab-list,
  .sidebar-toggle-button {
    margin: 12px 0;
    padding: unset;
    height: auto !important;
  }

  .sidebar-toggle-button {
    align-items: center;
    padding: 0;
    height: var(--header-height);
    z-index: 11 !important;
  }
  .sidebar-toggle-button .clickable-icon,
  .workspace-ribbon .clickable-icon {
    padding: 4px;
    width: 40px;
  }
}

body.mod-macos.is-hidden-frameless {
  .workspace-tab-header-container {
    padding-right: 12px !important;
  }
  .sidebar-toggle-button.mod-right {
    position: relative !important;
    padding: 0 !important;
  }

  &.is-fullscreen.show-ribbon {
    .mod-root .workspace-tab-header-container {
      z-index: var(--layer-popover);
      margin-left: calc(-1 * var(--ribbon-width));
    }
  }

  &.is-fullscreen {
    .mod-root .workspace-tabs.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
      padding-left: 80px;
    }
    .mod-root .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
      padding-left: 48px !important;
      padding-right: 0;
    }
  }

  &.show-ribbon {
    &:not(.is-fullscreen) .mod-sidedock.is-sidedock-collapsed .workspace-tabs.mod-top-left-space .workspace-tab-header-container-inner {
      margin-left: 96px;
    }
    .mod-root .workspace-tabs.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
      padding-left: 60px;
    }
    .mod-root .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
      padding-left: 20px;
      padding-right: 0;
    }
  }

  .mod-root .workspace-tabs.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
    padding-left: 4px;
  }
  .mod-root .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
    padding-right: 36px;
  }
  .mod-root .workspace-tabs:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
    padding-left: 120px;
  }
  .mod-root .workspace-tabs:not(.mod-top-left-space):not(.mod-top-right-space).mod-top .workspace-tab-header-container-inner,
  .mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner {
    padding-left: 80px;
  }
}

body.mod-windows.is-hidden-frameless,
body.mod-linux.is-hidden-frameless {
  .workspace-tab-header-container {
    padding-left: 12px !important;
  }
  .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
    padding-right: var(--frame-right-space) !important;
  }

  &.show-ribbon {
    .mod-sidedock.mod-left-split .workspace-tab-header-container {
      padding-left: 0px !important;
    }

    .mod-root .workspace-tabs.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
      padding-left: 252px;
    }
    .mod-root .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
      padding-left: 120px;
    }
    .mod-root .workspace-tabs:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
      padding-left: 244px;
    }
    .mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner {
      padding-left: 80px;
    }
  }

  .mod-root .workspace-tabs.mod-top-left-space.mod-top-right-space .workspace-tab-header-container-inner {
    padding-left: 212px;
  }
  .mod-root .workspace-tabs.mod-top-left-space:not(.mod-top-right-space) .workspace-tab-header-container-inner {
    padding-left: 88px;
  }
  .mod-root .workspace-tabs:not(.mod-top-left-space).mod-top-right-space .workspace-tab-header-container-inner {
    padding-left: 244px;
    padding-right: 0 !important;
  }
  .mod-root .workspace-tabs:not(.mod-top-left-space):not(.mod-top-right-space).mod-top .workspace-tab-header-container-inner,
  .mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner {
    padding-left: 120px;
  }
}

body:not(.is-mobile):not(.is-hidden-frameless) {
  &.show-ribbon .workspace:not(.is-left-sidedock-open):not(.is-right-sidedock-open) .mod-root .workspace-tab-header-container-inner {
    padding-left: 88px;
  }

  .workspace:not(.is-left-sidedock-open):not(.is-right-sidedock-open) .mod-root .workspace-tab-header-container-inner {
    padding-left: 48px;
  }
  .workspace.is-left-sidedock-open:not(.is-right-sidedock-open) .mod-root .workspace-tab-header-container-inner {
    padding-left: 80px;
  }
  .workspace:not(.is-left-sidedock-open).is-right-sidedock-open .mod-root .workspace-tab-header-container-inner {
    padding-left: 48px;
  }
  .workspace.is-left-sidedock-open.is-right-sidedock-open .mod-root .workspace-tab-header-container-inner {
    padding-left: 48px;
  }
}

body.is-tablet {
  @container (max-width: 640px) {
    .mod-root .workspace-tab-header-container-inner {
      justify-content: flex-start !important;
      padding: 0 !important;
    }
  }

  .workspace-tab-header-new-tab,
  .workspace-tab-header-tab-list,
  .sidebar-toggle-button {
    margin: 0;
    min-width: var(--input-height);
    justify-content: center;
  }

  .sidebar-toggle-button {
    align-items: center;
    padding: 0 !important;
    height: var(--header-height) !important;
    width: var(--header-height);

    .clickable-icon {
      padding: 0;
    }
  }

  .workspace-tab-header-container {
    padding: 0 var(--side-padding) !important;
  }

  .workspace-tab-header-container-inner {
    padding: 0 0 0 88px;
    height: 40px !important;
  }
}
