@import (reference) url('./Dropdown.less');

.TabBar {
  background: var(--color-white);
  min-height: calc(var(--gap-m) * 2 + var(--Text-height));
  position: relative;
  white-space: nowrap;

  &::before {
    background: var(--color-gray3);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }

  &:not(.is-menuOnly) {
    overflow-x: auto;
    overflow-y: hidden;
  }

  &.is-menuOnly:not(.is-menuSelected) {
    background: transparent;
    margin-bottom: calc(0px - var(--Text-height));

    &::before {
      display: none;
    }

    &:not(.is-open) {
      z-index: 1;
    }
  }

  & + .CIG-row:not(:has(.CIG-note)) .CIG-label:first-child {
    margin-bottom: var(--gap-s);
  }
}

.TabBar-item,
.TabBar-menuToggle {
  color: var(--color-gray6);
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px)
    var(--gap-l);
  position: relative;
  text-transform: uppercase;

  &::before {
    background-color: var(--color-dominant3);
    bottom: 0;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform var(--time-xs) var(--ease-out);
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

.TabBar-itemHover() {
  &::before {
    transform: scaleX(1);
  }
}

.TabBar-itemSelected() {
  color: var(--color-black);

  &::before {
    background-color: var(--color-dominant6);
    transform: none;
  }
}

.TabBar-item {
  border: none;

  &::after {
    background: var(--color-gray3);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }

  &:hover,
  &:focus {
    .TabBar-itemHover();
  }

  &:focus-visible {
    box-shadow: none !important;
    outline: solid 2px var(--color-dominant6);
    outline-offset: calc(-1 * var(--gap-s));
  }

  &.is-selected,
  &.selected,
  &.state-selected {
    .TabBar-itemSelected();
  }
}

.TabBar-menu:hover > .TabBar-menuToggle,
.TabBar.is-open .TabBar-menuToggle {
  .TabBar-itemHover();
}

.TabBar.is-menuSelected .TabBar-menuToggle {
  .TabBar-itemSelected();
}

.TabBar-menu {
  position: absolute;
  right: 0;
  top: 0;
}

.TabBar-menuToggle {
  border: none;
  height: calc(var(--gap-m) * 2 + var(--Text-height));
  padding-right: calc(var(--gap-s) * 3 + var(--Icon-size));
  text-decoration: none;

  &:empty {
    padding-left: var(--gap-s);
  }

  &::after {
    .Icon;

    content: 'more_horiz';
    position: absolute;
    right: calc(var(--gap-s) * 2);
    top: calc(
      var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2 - 1px
    );
  }
}

.TabBar-menuList {
  .Dropdown;
}

.TabBar-menuItem {
  .Dropdown-item;

  border: none;
  cursor: pointer;
  font-weight: inherit;
  padding-left: calc(var(--gap-s) * 2 + var(--Icon-size));
  position: relative;
  text-transform: none;

  &.is-selected::before {
    .Icon;

    content: 'check';
    left: var(--gap-s);
    margin-right: var(--gap-s);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

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

.TabBar.is-menuSelected {
  .TabBar-menuToggle {
    color: var(--color-black);

    &::before {
      background-color: var(--color-dominant6);
      bottom: 0;
      content: '';
      height: 4px;
      left: 0;
      position: absolute;
      right: 0;
    }

    &:hover {
      color: var(--Link-hoverColor);
    }
  }
}

.TabBar.is-menuError {
  .TabBar-menuToggle::after {
    color: var(--color-red6);
    content: 'error';
  }

  .TabBar-menuItem {
    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
  }
}

.TabBar-item,
.TabBar-menuItem {
  &.is-error {
    color: var(--color-red6);
    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));

    &::after {
      .Icon;

      background: transparent;
      content: 'error';
      height: auto;
      left: auto;
      position: absolute;
      right: var(--gap-l);
      top: 50%;
      transform: translateY(calc(-50% - 1px));
    }
  }
}

.TabBar-item.is-error::before {
  background-color: var(--color-red6);
}

.DashboardTabSelect {
  .TabBar-item {
    a {
      display: block;
      margin: calc(0px - var(--gap-m) + 1px) calc(0px - var(--gap-l))
        calc(0px - var(--gap-m) - 1px);
      padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px);
    }

    &.is-error a {
      margin-right: calc(0px - var(--gap-s) - var(--Icon-size) - var(--gap-l));
      padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
      position: relative;
      z-index: 1;
    }
  }
}
