/* Tabs organize similar content together into individual sections in the same page.
  The following component styles (non v4 classes) are specifically for horizontal tab styling

  Custom Props:

    --pull-inline (default is none) - Pull a tab containers' boundaries to the left and right by an amount (to go full width in a grid for example).

  Class Names:

    __horizontal-tabs - Establishes a container for the tabs
    __tab-item - Styles a tab item in its default, hover and focus states
    __tab-item-[xxs | xs | sm | md] sizes available for tab items. By default tab-item-sm styling is applied to tab item
    __tab-item-selected - Styles tab item in selected state

  Example Usages:

    Given <div class="TabBar">
            <button class="TabBar-item>...</button>
            <button class="TabBar-item>...</button>
          </div>

    div.TabBar          -> horizontal-tabs
    button.TabBar-item  -> tab-item tab-item-xs
*/

.__horizontal-tabs {
  @apply relative flex gap-4 overflow-x-auto overflow-y-hidden whitespace-nowrap rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-6;
}

.__tab-item {
  @apply relative inline-block cursor-pointer px-1.5 py-4 text-sm font-medium capitalize text-gray-500 focus-visible:ring-offset-4 focus:[&_a]:ring-offset-0 [&::after:not(:empty)]:btu-badge-sm hover:bg-gray-100 hover:text-gray-700 focus:ring-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-600 focus-visible:ring-offset-primary-100 more-contrast:focus-visible:ring-4 [&::after:not(:empty)]:text-center [&_a]:text-inherit [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
}

.__tab-item-selected {
  @apply text-gray-700 before:absolute before:inset-0 before:top-[unset] before:h-[2px] before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900;
}

.__tab-item-md {
  @apply py-4 text-md [&::after:not(:empty)]:btu-badge-md;
}

.__tab-item-sm {
  @apply py-4 text-sm [&::after:not(:empty)]:btu-badge-sm;
}

.__tab-item-xs {
  @apply py-3 text-sm [&::after:not(:empty)]:btu-badge-sm;
}

.__tab-item-xxs {
  @apply py-2 text-sm [&::after:not(:empty)]:btu-badge-sm;
}

/* Boost specificity of TabBar style to override native style of ul/ol elements. */
:is(div, ol, ul).TabBar {
  --pull-inline: ;
  @apply [margin-inline:calc(-1_*_var(--pull-inline,_0px))];
}

/* Styling v4 horizontal tabs using v5 components */
.TabBar:not(.is-menuOnly) {
  @apply __horizontal-tabs;
}

.TabBar-item {
  @apply __tab-item;

  &.is-selected,
  &.selected,
  &.state-selected {
    @apply __tab-item-selected;
  }
}

.TabBar-item:where(.is-error) {
  @apply flex items-center gap-2 after:justify-center after:bg-error-600 after:text-white after:[--tw-content:'!'];

  &.is-selected,
  &.selected,
  &.state-selected {
    @apply after:btu-badge-error;
  }
}

.tabs-wrapper {
  @apply contents;
}

.TabBar-item:has(.Badge) {
  @apply flex items-center gap-2 hover:mix-blend-multiply;

  .Badge {
    @apply btu-badge-primary btu-badge-sm;
  }
}

/* Menu Tab container styling using v5 components */
.TabBar.is-menuOnly {
  --tabbar-height: calc(var(--gap-m) * 2 + var(--Text-height));
  @apply rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-4 py-2;
}

.TabBar-menu {
  @apply flex items-center gap-2;
}

.TabBar-selected-text {
  @apply text-md font-semibold capitalize text-gray-900;
}

.TabBar-menuToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray after:btu-icon after:btu-icon-chevron-down;

  &.is-active {
    @apply btu-button-pressed after:btu-icon-chevron-up;
  }
}

.TabBar-menuList {
  @apply Dropdown;
}

.TabBar-menuItem {
  @apply Dropdown-item;

  &.is-selected {
    @apply Dropdown-item-selected;
  }
}

.TabBar.is-open .TabBar-menuList {
  @apply Dropdown-is-open;
}

.TabBar.is-menuError {
  .TabBar-selected-text {
    @apply flex items-center gap-2 after:min-w-[1.375rem] after:rounded-2xl after:bg-error-600 after:px-2 after:py-0.5 after:text-center after:text-xs after:text-white after:[--tw-content:'!'];
  }

  .TabBar-menuItem.is-error {
    @apply flex before:order-2 before:ml-auto before:min-w-[1.375rem] before:rounded-2xl before:bg-error-600 before:px-2 before:py-0.5 before:text-center before:text-xs before:text-white before:[--tw-content:'!'];
  }

  .TabBar-menuItem.is-selected.is-error {
    @apply gap-2 after:order-3 after:ml-0;
  }
}

/* dashboard tab select tab bar items custom styles */
.TabBar-item a {
  @apply -mx-1.5 -mb-4 -mt-1.5 blokk px-1 pb-4 pt-1.5;
}

.TabBar-item.is-error a {
  --tabitem-padding-right: calc(
    theme(gap.2) + theme(iconSize.md) + theme(padding[1.5])
  );
  @apply -mr-[--tabitem-padding-right] pr-[--tabitem-padding-right];
}

/* Account for different structure of dashboard tabs */
.DashboardTabSelect {
  .TabBar-item {
    @apply -mt-2;
  }

  .TabBar-item > a {
    @apply __tab-item;
  }

  .TabBar-item.selected > a {
    @apply __tab-item-selected;
  }
}
