// Styles for Header Tabs
//================================================== //

.tab-container.header-tabs {
  height: 40px;
  margin-bottom: 0;
  padding: 0 0 0 20px;

  &::before {
    background-image:
      linear-gradient(
        to right,
        rgba($header-default-bg-color, 1),
        rgba($header-default-bg-color, 0)
      );
    left: 20px;
  }

  &::after {
    background-image:
      linear-gradient(
        to right,
        rgba($header-default-bg-color, 0),
        rgba($header-default-bg-color, 1)
      );
  }

  .tab-list-info {
    display: none;
  }

  > .tab-list-container {
    border-bottom: 0;

    .tab-list {
      .tab {
        overflow: hidden;

        &.is-focused::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: inherit !important;
          border: 1px solid $ids-color-palette-azure-70;
          pointer-events: none;
          z-index: 1;
          display: block !important;
          height: calc(100% - 5px);
          top: 3px;
        }

        &:not(.is-disabled) {
          color: $header-tab-normal-color;
          font-weight: $ids-number-font-weight-bold;
        }

        &::before {
          background-color: rgba($header-tab-normal-color, 0);
          bottom: 0;
        }

        a {
          overflow: hidden;
          padding: 14px 11px 9px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:first-child {
          padding-left: 0;
        }

        &:hover:not(.is-disabled) {
          color: $header-tab-hover-color;

          .icon:not(.is-error):not(.icon-error) {
            color: $header-tab-hover-color;
          }
        }

        &.is-selected:not(.is-disabled) {
          color: $header-tab-hover-color;

          &:hover {
            color: $header-tab-hover-color;
          }
        }

        &.is-disabled {
          color: $header-tab-disabled-color-new;
          opacity: 0.8;
        }

        &.dismissible {
          .icon {
            color: $ids-color-palette-white;
            opacity: 0.6;
          }

          &:hover,
          &.is-selected {
            .icon:not(.is-error):not(.icon-error) {
              color: $ids-color-palette-white;
              opacity: 1;
            }
          }
        }
      }
    }
  }

  .animated-bar {
    background-color: $header-tab-hover-color;
    margin-top: 8px;
  }

  .tab-focus-indicator.is-visible {
    border-color: $header-tab-focus-border-color;
  }

  .tab-more,
  .add-tab-button {
    color: $header-tab-normal-color;

    span {
      color: inherit;
    }

    .icon {
      color: $header-tab-normal-color;
      inset-inline-start: 5px;
      top: -2px;
    }

    &:hover {
      color: $header-tab-hover-color;

      .icon:not(.is-error):not(.icon-error) {
        color: $header-tab-hover-color;
      }
    }

    &.is-open,
    &.is-selected {
      color: $header-tab-selected-color;

      .icon:not(.is-error):not(.icon-error) {
        color: $header-tab-selected-color;
      }
    }
  }

  .tab-more {
    padding: 12px 4px 11px 14px;

    &::before {
      background-color: $header-tab-separator;
      content: '';
      display: inline-block;
      height: 30px;
      left: 7px;
      position: absolute;
      top: 4px;
      width: 1px;
    }
  }

  .add-tab-button {
    padding: 8px 4px 5px;
  }

  // Alternate Header-Tab Backgrounds (Page Context)
  //=================================================

  &.alternate {
    background-color: $header-tab-alt-bg-color;
    border-bottom: 1px solid $header-tabcontainer-border-color;

    &::before,
    &::after {
      height: 39px;
    }

    &::before {
      background-image:
        linear-gradient(
          to right,
          rgba($header-tab-alt-bg-color, 1),
          rgba($header-tab-alt-bg-color, 0)
        );
    }

    &::after {
      background-image:
        linear-gradient(
          to right,
          rgba($header-tab-alt-bg-color, 0),
          rgba($header-tab-alt-bg-color, 1)
        );
    }

    > .tab-list-container {
      height: 40px;

      .tab-list {
        .tab {
          color: $header-tab-alt-normal-color;

          &::before {
            background-color: rgba($header-tab-alt-normal-color, 0);
            bottom: 1px;
          }

          a { // has 12px line height;
            padding: 12px 11px;
          }

          &:hover:not(.is-disabled) {
            color: $header-tab-alt-hover-color;
          }

          &.is-selected:not(.is-disabled) {
            color: $header-tab-alt-selected-color;

            .icon:not(.is-error):not(.icon-error) {
              color: $header-tab-alt-selected-color;
            }
          }
        }
      }
    }

    .animated-bar {
      background-color: rgba($header-tab-alt-selected-color, 1);
      margin-top: 0;
      top: 36px;
    }

    .tab-focus-indicator.is-visible {
      border-color: $header-tab-alt-selected-color;
      box-shadow: $header-focus-box-shadow;
    }

    .tab-more {
      color: $header-tab-alt-normal-color;

      &::before {
        background-color: $header-tab-alt-separator;
      }

      .icon {
        color: $header-tab-alt-normal-color;
      }

      &:hover {
        color: $header-tab-alt-hover-color;

        .icon:not(.is-error):not(.icon-error) {
          color: $header-tab-alt-hover-color;
        }
      }

      &.is-selected,
      &.is-open {
        color: $header-tab-alt-selected-color;

        .icon:not(.is-error):not(.icon-error) {
          color: $header-tab-alt-selected-color;
        }
      }
    }
  }
}

.tab-container.header-tabs {
  &:not(.alternate) {
    > .tab-list-container {
      .tab-focus-indicator {
        margin-top: 2px !important;
      }

      .tab {
        top: -2px;

        &:not(.is-disabled) {
          &:not(.is-selected):hover {
            color: $header-tab-hover-color;
            border-bottom: 4px solid $header-tab-indicator-hover-color;
            background-color: $header-tab-background-hover-color;
          }

          &.is-selected {
            color: $header-tab-selected-color;
            border-bottom: 4px solid $header-tab-selected-color;
          }
        }
      }
    }
  }
}

.page-container.tab-panel-container {
  .tab-panel > .toolbar {
    margin-top: 5px;
  }
}

// RTL Styles for Header Tabs
html[dir='rtl'] {
  .tab-container.header-tabs {
    padding: 0 20px 0 0;

    &::before {
      background-image:
        linear-gradient(
          to left,
          rgba($header-bg-color, 1),
          rgba($header-bg-color, 0)
        );
      left: auto;
      right: 20px;
    }

    &::after {
      background-image:
        linear-gradient(
          to left,
          rgba($header-bg-color, 0),
          rgba($header-bg-color, 1)
        );
      left: 51px;
      right: auto;
    }

    &.alternate {
      &::before {
        background-image:
          linear-gradient(
            to left,
            rgba($header-tab-alt-bg-color, 1),
            rgba($header-tab-alt-bg-color, 0)
          );
      }

      &::after {
        background-image:
          linear-gradient(
            to left,
            rgba($header-tab-alt-bg-color, 0),
            rgba($header-tab-alt-bg-color, 1)
          );
      }
    }
  }
}

html.theme-classic-dark .tab-container.header-tabs.alternate::after {
  background-image: linear-gradient(to right, rgba(28, 24, 25, 0), #50535a);
}