@use "sass:color";
@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 *;

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


.dx-tab {
  gap: $material-tabs-item-gap;
  padding: $material-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-state-disabled {
    color: $tabs-tab-disabled-color;

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

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

  .dx-tab-text {
    column-gap: $material-base-icon-margin;
    line-height: $material-tab-text-line-height;
    font-weight: 500;
    text-transform: uppercase;

    .dx-tab-text-span-pseudo {
      display: none;
    }
  }

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

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

  .dx-tabs-item-badge {
    align-self: center;
  }
}

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