@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";


.dx-tabs-styling-mode-secondary {
  &.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
    flex-basis: auto;
  }

  .dx-tab {
    min-width: 0;

    .dx-tab-text .dx-tab-text-span {
      text-transform: none;
    }
  }

  .dx-tab-content {
    position: relative;
  }

  &.dx-tab-indicator-position-top {
    .dx-tab.dx-tab-selected .dx-tab-content {
      @include dx-tabs-horizontal-indicator-secondary(top, $tabs-selected-tab-border-color);
    }

    .dx-tab-selected.dx-state-disabled .dx-tab-content {
      @include dx-tabs-horizontal-indicator-secondary(top, $tabs-disabled-tab-border-color);
    }
  }

  &.dx-tab-indicator-position-right {
    .dx-tab-selected {
      @include dx-tabs-vertical-indicator-secondary(right, $tabs-selected-tab-border-color);
    }

    .dx-tab-selected.dx-state-disabled {
      @include dx-tabs-vertical-indicator-secondary(right, $tabs-disabled-tab-border-color);
    }
  }

  &.dx-tab-indicator-position-bottom {
    .dx-tab.dx-tab-selected .dx-tab-content {
      @include dx-tabs-horizontal-indicator-secondary(bottom, $tabs-selected-tab-border-color);
    }

    .dx-tab-selected.dx-state-disabled .dx-tab-content {
      @include dx-tabs-horizontal-indicator-secondary(bottom, $tabs-disabled-tab-border-color);
    }
  }

  &.dx-tab-indicator-position-left {
    .dx-tab-selected {
      @include dx-tabs-vertical-indicator-secondary(left, $tabs-selected-tab-border-color);
    }

    .dx-tab-selected.dx-state-disabled {
      @include dx-tabs-vertical-indicator-secondary(left, $tabs-disabled-tab-border-color);
    }
  }
}