.theme-dark {
  --ebw-tab-title-active-fg: var(--text-normal);
  --ebw-tab-title-active-bg: var(--secondary-accent-5);
  --ebw-tab-title-inactive-bg: var(--gray-dark-4);
  --ebw-tab-title-inactive-focused-bg: var(--gray-dark-4);
  --ebw-tab-title-active-focused-bg: var(--primary-accent-5);

  // hover editor popover colors
  --ebw-he-title-border: var(--tab-outline-color);
  --he-title-bar-active-fg: var(--gray-light-6);
  --he-title-bar-active-bg: var(--secondary-accent-4);
  --he-title-bar-active-pinned-bg: var(--primary-accent-4);

  --he-title-bar-inactive-fg: var(--gray-light-3);
  --he-title-bar-inactive-bg: var(--gray-dark-3);
  --he-title-bar-inactive-pinned-bg: var(--gray-dark-3);

  --he-text-on-accent-inactive: var(--gray-dark-7);
  --he-text-on-accent-active: var(--gray-light-5);
}
.theme-light {
  --ebw-tab-title-active-fg: white;
  --ebw-tab-title-active-bg: var(--secondary-accent-4);
  --ebw-tab-title-inactive-bg: var(--gray-dark-3);
  --ebw-tab-title-active-focused-bg: var(--primary-accent-4);

  // hover editor popover colors
  --ebw-he-title-border: var(--gray-dark-3);
  --he-title-bar-active-fg: white;
  --he-title-bar-active-bg: var(--secondary-accent-3);
  --he-title-bar-active-pinned-bg: var(--primary-accent-3);
  --he-title-bar-inactive-fg: var(--gray-light-5);
  --he-title-bar-inactive-bg: var(--gray-dark-1);
  --he-title-bar-inactive-pinned-bg: var(--gray-dark-1);

  --he-text-on-accent-inactive: var(--gray-dark-5);
  --he-text-on-accent-active: var(--gray-light-5);
}
body {
  --divider-color: var(--background-modifier-border);
  --file-margins: var(--size-4-2) var(--size-4-8);
  --ribbon-background: var(--titlebar-background);
  --ribbon-background-collapsed: var(--titlebar-background);
  --status-bar-background: var(--titlebar-background);
  --tab-text-color: var(--icon-color);
  --tab-text-color-focused: var(--icon-color-focused);
  --tab-container-background: var(--background-secondary);
  --tab-outline-color: var(--background-modifier-border);

  --he-title-bar-height: calc(var(--icon-s) + var(--size-2-3));
  --he-view-header-height: calc(var(--icon-s) + var(--size-2-3));
}
:not(.is-focused) {
  .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
    color: var(--tab-text-color);
    background-color: var(--background-secondary);

    .workspace-tab-header-inner-title {
      color: inherit;
    }

    &.is-active {
      color: var(--ebw-tab-title-active-fg);
      background-color: var(--ebw-tab-title-active-bg);
    }
  }
}
.is-mobile,
.is-focused {
  --divider-color: var(--background-modifier-border-focus);
  --ribbon-background: var(--titlebar-background-focused);
  --ribbon-background-collapsed: var(--titlebar-background-focused);
  --status-bar-background: var(--titlebar-background-focused);
  --tab-outline-color: var(--background-modifier-border-focus);

  .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active {
    color: var(--ebw-tab-title-active-fg);
    background-color: var(--ebw-tab-title-active-focused-bg);
    .workspace-tab-header-inner-title {
      color: inherit;
    }
  }
}
// left and right sidedock borders (Hidden and Native modes)
body:not(.is-mobile):not(.is-frameless):not(.is-hidden-frameless), // native
body:not(.is-mobile).is-hidden-frameless {
  // Border on the right side of the left-toggle button
  .workspace-ribbon .sidebar-toggle-button {
    border-right: var(--tab-outline-width) solid var(--tab-outline-color);
  }
  .workspace.is-left-sidedock-open .workspace-split.mod-left-split .workspace-tab-header-container {
    border-right: var(--tab-outline-width) solid var(--tab-outline-color);
  }
  div.workspace.is-right-sidedock-open .workspace-split.mod-right-split .workspace-tab-header-container {
    border-left: var(--tab-outline-width) solid var(--tab-outline-color);
  }
}

// Floating sidedock
body:not(.is-mobile) .mod-left-split.is-floating {
  left: calc(var(--ribbon-width));
}
body:not(.is-mobile) .mod-right-split.is-floating {
  right: 0;
}
body.is-mobile .workspace-drawer-header-icon.sync-status-icon {
  background-color: var(--background-primary);
}

// Put view actions on the left side of the view title
.ebullientworks-reverse-view-header-actions {
  .popover.hover-editor .popover-content .workspace-leaf-content .view-header,
  .workspace-tabs .view-header {
    margin: 0;
    > .view-header-icon {
      order: 0;
    }
    > .view-actions {
      order: 0;
      flex-direction: row-reverse;
      padding: 0 var(--size-2-3);
    }
    > .view-header-nav-buttons {
      order: 1;
    }
    > .view-header-title-container {
      order: 1;
      justify-content: flex-start;
    }
  }
}
// For stacked tabs resize and align the icons with the view header
// Hide the view header title
body.is-focused,
body:not(.is-focused) {
  .workspace .mod-root .workspace-tabs.mod-stacked {
    --tab-stacked-header-width: calc(var(--icon-s) + var(--size-2-3));
    .workspace-tab-container {
      .workspace-tab-header-inner-icon,
      .workspace-tab-header-status-icon,
      .workspace-tab-header-inner-close-button {
        padding: var(--size-2-3) var(--size-2-2);
        color: inherit;
      }
      .workspace-tab-header-inner {
        padding: 0 var(--size-4-2);
        justify-content: flex-start;
      }
      .workspace-tab-header-inner {
        --tab-stacked-font-weight: var(--font-light);
        --tab-stacked-font-size: var(--font-ui-smaller);
        font-family: var(--font-monospace);
      }
    }
    .view-header {
      --text-normal: var(--text-faint);
      --header-height: calc(var(--icon-s) + var(--size-2-4));
      align-items: center;
      gap: var(--size-2-4);
    }
    .view-header-title {
      line-height: var(--icon-s);
      visibility: hidden;
    }
  }

  &.is-tablet .workspace .mod-root .workspace-tabs.mod-stacked {
    .workspace-tab-container {
      .workspace-tab-header-inner-close-button {
        padding-top: var(--size-4-2);
      }
      .workspace-tab-header-status-container {
        padding-top: var(--size-2-2);
      }
    }
  }
}

.mobile-navbar-actions,
.workspace-drawer .nav-buttons-container,
body.is-tablet .sidebar-toggle-button,
.is-mobile .view-header-nav-buttons,
.is-mobile .view-header .view-action {
  --icon-color: var(--text-muted);
  --icon-color-hover: var(--text-muted);
  --icon-color-active: var(--text-accent);
  --icon-color-focused: var(--text-normal);
}
body.is-tablet {
  --header-height: calc(var(--icon-m) + var(--size-4-3));
  .view-header {
    --icon-xs: 14px;
    --icon-s: 16px;
    --icon-m: 18px;
    --icon-l: 18px;
  }
}
body.is-tablet,
.is-mobile {
  --view-header-height: var(--header-height);
  .view-header-title-container {
    height: unset;
  }
}
body.is-tablet .sidebar-toggle-button,
body.is-tablet .view-header-nav-buttons,
body.is-tablet .view-header .view-action,
.is-mobile .view-header-nav-buttons,
.is-mobile  .view-header .view-action {
  --icon-size: var(--icon-m);
  --icon-stroke: var(--icon-m-stroke-width);
}
.workspace-drawer {
  .workspace-drawer-active-tab-icon,
  .workspace-drawer-tab-option-item-icon,
  .workspace-drawer-active-tab-back-icon,
  .workspace-drawer-header-icon,
  .clickable-icon.side-dock-ribbon-action .svg-icon,
  .workspace-tab-header-inner-icon .svg-icon,
  .workspace-tab-header-inner-icon .svg-icon,
  .nav-buttons-container {
    --icon-size: var(--icon-m);
    --icon-stroke: var(--icon-m-stroke-width);
  }
}

.workspace-drawer-header-icon,
.workspace-drawer-active-tab-back-icon,
.workspace-drawer-active-tab-icon:last-child {
  color: var(--icon-color);
}

// Popover
.hover-editor {
  .popover-content {
    .popover-titlebar {
      border-top: 1px solid var(--ebw-he-title-border);
    }
    .view-header {
      --header-height: calc(var(--icon-s) + var(--size-2-4));
      align-items: center;
    }
    .view-header-title {
      line-height: var(--icon-s);
    }
    .view-header-title-container::after {
      display: none;
    }
  }
}


// Sync status icon
:is(.is-mobile, .is-phone) {
  .workspace:not(:has(.workspace-drawer-backdrop)) {
    .workspace-drawer.mod-right {
      display: flex !important;
      overflow: visible;
      left: 100%;

      .workspace-drawer-inner {
        overflow: visible;
      }
    }
    .view-actions {
      padding-right: 32px;

      &:is(.is-phone) {
        padding-right: 23px;
      }
    }
  }
}

.is-phone {
  .sync-status-icon {
    position: absolute;
    top: 0.5rem;
    left: calc(-1 * 3.25rem);
  }
}

.is-tablet {
  .sync-status-icon {
    position: absolute;
    top: 2.3rem;
    left: calc(-1 * 3.25rem);
  }
}

.message.mod-error,
.message.mod-info,
.message.mod-success,
.message.mod-warning {
  color: var(--modifier-text);
}
.message.mod-error a,
.message.mod-info a,
.message.mod-success a,
.message.mod-warning a {
  color: var(--modifier-text-accent);
}
.message.mod-info {
  background-color: var(--background-modifier-info);
}
button.mod-warning,
.message.mod-warning {
  background-color: var(--background-modifier-warning);
  color: var(--modifier-text);
}
button.mod-destructive {
  background-color: var(--background-modifier-error);
  color: var(--modifier-text);
}
.checkbox-container {
  background-color: var(--interactive-disabled);
  &.is-enabled {
    background-color: var(--interactive-toggle);
  }
}
@media (hover: hover) {
  button.mod-warning:hover {
    background-color: var(--background-modifier-warning-hover);
  }
  button.mod-destructive:hover {
    background-color: var(--background-modifier-error-hover);
  }
}
