@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../../base/navBar";

// adduse
@use "../badge";

$material-navbar-focused-item-shadow: inset 0 0 0 1px $navbar-tab-focused-border-color;


.dx-navbar {
  padding: 0;
  border: none;
}

.dx-nav-item,
.dx-rtl .dx-nav-item {
  background: $navbar-tab-bg;

  .dx-tab-text {
    line-height: normal;
    color: $navbar-tab-color;
  }

  .dx-navbar & .dx-icon {
    @include dx-icon-sizing($material-navbar-icon-size);

    color: $navbar-tab-color;
  }

  &.dx-tab-selected,
  &.dx-state-focused,
  &.dx-state-active {
    &::after {
      content: none;
    }
  }

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

    .dx-tab-text,
    .dx-icon {
      color: $navbar-tab-selected-color;
    }
  }

  &.dx-state-active {
    border: none;
    box-shadow: none;
  }

  &.dx-state-focused {
    box-shadow: $material-navbar-focused-item-shadow;
  }

  &.dx-state-disabled {
    .dx-icon {
      opacity: 0.5;
    }
  }
}

.dx-navbar-item-badge {
  margin-right: -26px;
  top: $material-navbar-badge-top;
}

.dx-rtl .dx-navbar-item-badge {
  margin-left: -26px;
}