/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
@import "../prefix";
@import "variables";

.nz-widget-tab {
  user-select: none;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  padding: 4px 1em 0;
  position: relative;
  border: 0 solid var(--iui-color-border);
  max-width: 9em;
  background: var(--iui-color-background-backdrop);

  > span {
    font-size: $nz-widget-tab-font-size;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  > .nz-badge {
    position: absolute;
    top: 0;
    left: 0;
  }

  &:not(.nz-minimized) {
    &.nz-active {
      background: var(--iui-color-background);
      color: var(--iui-color-text-accent);
      padding-bottom: 1px;
      margin-bottom: -1px;

      &:before {
        $padding: 0.25em;
        content: "";
        position: absolute;
        background: currentColor;
        left: $padding;
        top: 1px;
        border-radius: 0.2em;
        width: calc(100% - #{2 * $padding});
        height: 0.15em;
      }

      &.nz-last {
        border-right-width: 1px;
      }
    }
  }

  &:not(.nz-active),
  &.nz-minimized {
    color: var(--iui-color-text-muted);
    border-right-width: 1px;
  }

  &:not(.nz-minimized) {
    &.nz-first-inactive {
      border-left-width: 1px;
    }
  }

  &.nz-first {
    border-top-left-radius: $nz-widget-tab-border-radius;
  }

  &:hover {
    background: var(--iui-color-background);

    &:not(.nz-active) {
      color: var(--iui-color-text);
    }
  }
}