@import 'carbon-components/scss/components/ui-shell/_header.scss';
@import 'carbon-components/scss/components/ui-shell/_ui-shell.scss';

.bx--header {
  background-color: var(--color-stripe-01);
  border-bottom: none;
  transition-property: background-color;
  position: unset;

  .bx--header__action {
    .bx--header__action--active {
      border-left-color: var(--color-table-border2);
      border-bottom-color: var(--color-table-border1);
    }
    &:focus {
      border-color: var(--color-base04);
    }
  }

  .bx--header__menu-trigger {
    &:hover {
      fill: var(--color-text-01);
      background: var(--color-ui-04);
    }
    & > svg {
      fill: var(--color-text-02);
    }
  }

  .bx--header__name {
    position: relative;
    border: none;
    font-size: 1rem;
  }

  .bx--header__name,
  .kui--tab:not(:last-child) {
    &:after {
      box-shadow: 1px 0 0px 0 var(--color-table-border1);
      content: '';
      height: 60%;
      width: 1px;
      right: 1px;
      position: absolute;
    }
  }

  .bx--header__name {
    &,
    &:hover {
      color: var(--color-text-02);
    }
  }

  .bx--header__nav {
    padding-left: 0;

    /* this rule is important: otherwise the default carbon components
   styling uses media selectors to hide our Tab buttons for narrower
   windows */
    display: block;

    &:before {
      display: none;
    }
  }

  .kui--tab {
    counter-increment: tab-index;
    display: flex;
    align-items: center;
    position: relative;
    min-width: 12rem;
    max-width: 20rem;
    margin-left: 1rem;

    &.kui--tab--active {
      /* background: var(--color-repl-background); */
      box-shadow: inset 0 -2px 0 0 var(--active-tab-color);
    }

    &.processing {
      &,
      &.kui--tab--active {
        .bx--header__menu-item {
          color: var(--color-base0C);
        }
      }
    }

    &:not(.kui--tab--active) {
      /*      box-shadow: 1px 0 0 0 var(--color-table-border1);*/
    }
    &.kui--tab--active + .kui--tab {
      box-shadow: none;
    }

    [data-tab-names='fixed'],
    [data-fresh='true'] {
      .kui--tab--label:after {
        content: counter(tab-index);
        transition: font-size 150ms ease-in-out;
      }
    }

    [data-tab-names='fixed'],
    [data-fresh='true'] {
      .bx--header__menu-item {
        padding-right: 0;
      }
    }

    &.kui--tab--active {
      .bx--header__menu-item {
        color: var(--color-text-01);
        font-weight: 600;
        &:hover {
          color: var(--color-text-01);
        }
      }
    }
    .bx--header__menu-item {
      color: var(--color-text-02);
      padding: 0;
      font-size: 1rem;
      flex: 1;

      &:hover {
        color: var(--color-text-02);
        background: transparent;
      }

      &:focus {
        border-color: var(--color-brand-03);
      }
    }

    .bx--text-truncate--end {
      display: flex;
      align-items: center;

      .kui--tab--label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &:hover .kui--tab-close {
      opacity: 1;
    }
    .kui--tab-close {
      transition-property: background-color;
      padding: 1px;
      display: flex;
      cursor: pointer;
      margin: 0 0.375rem 0 0.875rem;
      opacity: 0;

      svg path {
        fill: transparent;
        transition-property: fill;
        fill: var(--color-text-02);
      }
      &:hover svg path {
        fill: var(--color-text-01);
      }
      &:hover {
        background: var(--color-table-border1);
      }
    }

    &:not(.kui--tab--active) .kui--tab-close:hover {
      background: var(--color-table-border3);
    }
  }

  .kui--top-tab-buttons {
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0 0.375rem;

    .kui--top-tab-button {
      display: flex;
      padding: 3px;

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

    svg {
      fill: var(--color-text-02);
    }
  }
}

[kui-theme-style='dark'] {
  .bx--header .kui--tab:not(.kui--tab--active) {
    .bx--header__menu-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

[kui-theme-style='light'] {
  .bx--header .kui--tab:not(.kui--tab--active) {
    .bx--header__menu-item:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

@media (max-width: 42rem) {
  .kui--top-tab-stripe {
    display: none;
  }
}

#kui--custom-top-tab-stripe-button-container {
  display: flex;
  justify-content: flex-end;
  position: relative;

  &[num-button='2'] {
    /* number of buttons in the container */
    $numButtons: 2;
    right: calc(-1.875em * #{$numButtons - 1} - 3px);
  }

  &[num-button='4'] {
    /* number of buttons in the container */
    $numButtons: 4;
    right: calc(-1.875rem * #{$numButtons - 1} - 3px);
  }

  /*  &:not(:hover) {
    svg[data-active='true'] {
      margin-right: 6px;
    }
  } */

  /* 2.75: height of header; 0.875: font size of header; 24px height of icons */
  $headerHeight: 2.75rem;
  $headerFontSize: 0.875;
  $iconSize: 32px;
  $iconPadding: 3px;
  top: calc(((#{$headerHeight} * #{$headerFontSize}) - #{$iconSize}) / 2 + 1px);

  transition-property: right;
  color: var(--color-text-01);

  &:hover {
    /* expose all buttons when hovering over the button container */
    right: 0;

    svg {
      color: var(--color-text-02);

      &,
      &:not([data-active]) {
        /*order: unset;*/
      }

      &[data-active]:not(.kui--rotate-180-then-flip) {
        color: var(--active-tab-color);
        border-bottom-color: currentColor;
      }

      &[data-active].kui--rotate-180-then-flip {
        color: var(--active-tab-color);
        border-top-color: currentColor;
      }
    }
  }

  svg {
    padding: $iconPadding;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;

    &:hover {
      opacity: 1;
    }

    &:not([data-active]) {
      order: 99999;
      &:hover {
        cursor: pointer;
        background: var(--color-table-border3);
        color: var(--color-text-01);
      }
    }
  }
}
