/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */

.xh-tab-container {
  display: flex;
  max-width: 100%;
  max-height: 100%;
  flex-direction: column;
  //noinspection CssRedundantUnit
  flex: 1 1 0%;
  // % unit used to avoid browser fallback to px,
  // which prevents container expansion

  .xh-tab-wrapper {
    display: flex;
    min-width: 0;
    min-height: 0;
    //noinspection CssRedundantUnit
    flex: 1 1 0%;
  }
}

.xh-tab-switcher {
  // Allow scrolling
  &--overflow-enabled {
    .xh-tab-switcher__scroll {
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  // Generic tab defaults - orientation-specific blocks below layer on top of these.
  .bp6-tab {
    color: var(--xh-tab-text-color);

    &[aria-disabled='true'] {
      color: var(--xh-tab-disabled-text-color);
    }

    // Tooltip
    .bp6-popover-target {
      width: 100%;
    }
  }

  // Active/hover color override
  .bp6-tab[aria-selected='true'],
  .bp6-tab:not([aria-disabled='true']):hover {
    .xh-tab-switcher__tab {
      color: var(--xh-tab-active-text-color);
    }
  }

  &--top {
    padding-left: var(--xh-pad-px);
    max-width: 100%;

    // Active indicator sits on the bottom edge of the tab, adjacent to the content below.
    .bp6-tab[aria-selected='true'] {
      box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
    }
  }

  &--bottom {
    padding-left: var(--xh-pad-px);
    padding-top: var(--xh-pad-half-px);
    max-width: 100%;

    // Flip the indicator to be on top of the tab label
    .bp6-tab[aria-selected='true'] {
      box-shadow: inset 0 3px 0 currentColor;
    }
  }

  &--left,
  &--right {
    flex-direction: column;
    max-height: 100%;
    min-width: var(--xh-tab-switcher-vertical-min-width);
    padding: var(--xh-tab-switcher-vertical-padding);

    // Make overflow button full width
    .bp6-popover-target {
      display: block;

      .xh-button {
        width: 100%;
      }
    }

    // Modern vertical rail: rounded, padded items with a muted resting color, a clear hover
    // affordance, and a filled active "pill". Fully driven off the --xh-tab-switcher-vertical-*
    // tokens so it stays light/dark-theme safe and is easily customized or disabled per-app.
    .bp6-tab {
      margin-bottom: var(--xh-tab-switcher-vertical-item-gap);
      padding: var(--xh-tab-switcher-vertical-item-padding);
      border-radius: var(--xh-tab-switcher-vertical-item-border-radius);
      color: var(--xh-tab-switcher-vertical-item-text-color);
      font-weight: var(--xh-tab-switcher-vertical-item-font-weight);
      transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
    }

    .bp6-tab:not([aria-disabled='true']):hover {
      background-color: var(--xh-tab-switcher-vertical-item-hover-bg);
    }

    .bp6-tab[aria-selected='true'] {
      background-color: var(--xh-tab-switcher-vertical-item-active-bg);
      font-weight: var(--xh-tab-switcher-vertical-item-active-font-weight);
    }

    // Hover + active labels take the active/intent text color, re-applied to both the tab and its
    // inner label so it overrides the muted resting color set on the item above.
    .bp6-tab[aria-selected='true'],
    .bp6-tab:not([aria-disabled='true']):hover {
      color: var(--xh-tab-switcher-vertical-item-active-text-color);

      .xh-tab-switcher__tab {
        color: var(--xh-tab-switcher-vertical-item-active-text-color);
      }
    }
  }

  &--left {
    border-right: var(--xh-tab-switcher-vertical-border);
  }

  &--right {
    border-left: var(--xh-tab-switcher-vertical-border);
  }

  &__tab {
    align-items: baseline;
    font-family: var(--xh-tab-font-family);
    font-size: var(--xh-tab-font-size-px);
    user-select: none;

    & > svg:first-child {
      margin: 0 0.4em 0 0;
      min-width: 0;
    }

    & > span {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    // Close button styling
    .xh-button {
      align-self: center;
      padding: 0 !important;
      margin-left: 3px;
      min-height: 15px;
      min-width: 15px;
      border-radius: 100% !important;
    }
  }

  &__overflow-menu {
    min-width: unset;

    .xh-button {
      padding: 0 !important;
      min-width: 20px !important;
      min-height: 20px !important;
    }
  }
}