@use "sass:math";
@use "../../../colors" as *;
@use "../../../button/colors" as *;
@use "../../../../base/icon_fonts" as *;
@use "../../../../base/tabs";
@use "../../variables/sizes" as *;
@use "../../variables/colors" as *;
@use "../../variables/borders" as *;
@use "../../mixins" as *;

// adduse


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

  @include dx-tabs-after-mixin(true);

  &::after {
    z-index: 2;
  }

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

    @include dx-tabs-border-mixin(
      $generic-tabs-border-hover-top,
      $generic-tabs-border-hover-right,
      $generic-tabs-border-hover-bottom,
      $generic-tabs-border-hover-left,
    );
  }

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

    @include dx-tabs-border-mixin(
      $generic-tabs-border-selected-top,
      $generic-tabs-border-selected-right,
      $generic-tabs-border-selected-bottom,
      $generic-tabs-border-selected-left,
    );

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

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

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

    @include dx-tabs-border-mixin(
      $generic-tabs-border-active-top,
      $generic-tabs-border-active-right,
      $generic-tabs-border-active-bottom,
      $generic-tabs-border-active-left,
    );

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

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

  &.dx-state-disabled .dx-tab-content {
    opacity: 0.32;
  }

  &.dx-state-focused.dx-state-disabled {
    &::after {
      z-index: 2;
    }
  }

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

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

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

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

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

.dx-tabs.dx-state-focused {
  .dx-tab {
    &.dx-state-focused {
      @include dx-tabs-border-mixin(
        $generic-tabs-border-focused-top,
        $generic-tabs-border-focused-right,
        $generic-tabs-border-focused-bottom,
        $generic-tabs-border-focused-left,
      );
    }

    &.dx-state-focused.dx-state-disabled {
      @include dx-tabs-border-mixin(
        $generic-tabs-border-focused-disabled-top,
        $generic-tabs-border-focused-disabled-right,
        $generic-tabs-border-focused-disabled-bottom,
        $generic-tabs-border-focused-disabled-left,
      );
    }

    &.dx-focused-disabled-next-tab {
      &::after {
        border-inline-end: none;
      }
    }

    &.dx-focused-disabled-prev-tab {
      &::after {
        border-inline-start: none;
      }
    }
  }
}