@use "sass:color";
@use "sass:string" as string;
@use "../../../colors" as *;
@use "../../../sizes" as *;
@use "../../../button/colors" as *;
@use "../../../button/mixins" as *;
@use "../../../../base/icon_fonts" as *;
@use "../../../../base/tabs";
@use "../../variables/colors" as *;
@use "../../variables/sizes" as *;
@use "../../mixins" as *;
@use "../../../common/sizes" as *;

// adduse
@use "../../../scrollable";
@use "../../../badge";
@import "styling-mode/primary";
@import "styling-mode/secondary";


.dx-tab {
  gap: $fluent-tabs-item-gap;
  padding: $fluent-tabs-item-padding;
  background-color: $tabs-tab-background;
  color: $tabs-tab-color;

  &.dx-state-hover {
    background-color: $tabs-hovered-tab-bg-color;
  }

  &.dx-tab-selected {
    color: $tabs-tab-selected-color;

    .dx-icon {
      color: $tabs-tab-icon-selected-color;
    }

    .dx-tab-text .dx-tab-text-span {
      visibility: visible;

      .dx-tab-text-span-pseudo {
        visibility: hidden;
      }
    }
  }

  &.dx-state-disabled {
    color: $tabs-tab-disabled-color;

    .dx-tab-text .dx-tab-text-span-pseudo {
      color: $tabs-tab-disabled-color;
    }

    .dx-icon {
      color: $tabs-tab-icon-disabled-color;
    }
  }

  &.dx-state-active {
    background-color: $tabs-active-tab-bg-color;
  }

  .dx-tab-text {
    column-gap: $fluent-base-icon-margin;
    row-gap: $fluent-tabs-item-gap;
    line-height: $fluent-line-height;

    .dx-tab-text-span {
      position: relative;
      display: block;
      font-weight: $fluent-tab-font-weight-accent;
      visibility: hidden;
    }

    .dx-tab-text-span-pseudo {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      color: $tabs-tab-color;
      font-weight: $fluent-tab-font-weight-basic;
      visibility: visible;
    }
  }

  .dx-icon {
    color: $tabs-tab-icon-color;
    visibility: visible;

    @include dx-icon-sizing($fluent-tabs-icon-size);

    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .dx-tabs-item-badge {
    align-self: center;
    min-width: $fluent-badge-min-size;
    min-height: $fluent-badge-min-size;
  }
}

.dx-tabs.dx-state-focused {
  .dx-tab.dx-state-focused {
    background-color: $tabs-focused-tab-bg-color;
  }
}

.dx-tabs-icon-position-start .dx-tab-text::after {
  text-align: end;
}

.dx-tabs-icon-position-end .dx-tab-text::after {
  text-align: start;
}

.dx-tabs-icon-position-top .dx-tab-text::after {
  text-align: center;
  vertical-align: bottom;
}

.dx-tabs-icon-position-bottom .dx-tab-text::after {
  text-align: center;
  vertical-align: top;
}