@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../list/sizes" as *;
@use "../button/mixins" as *;
@use "../button/colors" as *;
@use "../button/sizes" as *;
@use "../checkBox/sizes" as *;
@use "mixins" as *;
@use "../../base/toolbar";
@use "../../base/icons" as *;

// adduse
@use "../dropDownMenu";

.dx-toolbar {
  background-color: $toolbar-bg;
  color: $toolbar-color;

  @include dx-toolbar-sizing(
    $material-toolbar-height,
    $material-toolbar-padding,
    $material-toolbar-label-font-size,
    $material-toolbar-item-spacing
  );

  &.dx-state-disabled {
    opacity: 1;
  }

  &.dx-toolbar-multiline {
    .dx-toolbar-item {
      height: $material-toolbar-height;
    }
  }
}

.dx-toolbar-after {
  .dx-toolbar-item {
    @include dx-toolbar-item-padding($material-toolbar-item-spacing);
  }
}

.dx-toolbar-background {
  background-color: $toolbar-bg;
}

.dx-toolbar-menu-section {
  border-bottom: 1px solid $base-border-color;

  .dx-list-item-content,
  .dx-toolbar-item-auto-hide {
    padding: $material-list-item-vertical-padding $material-list-item-horizontal-padding $material-list-item-vertical-padding - 1px;
  }

  .dx-list-item-content {
    font-size: $material-base-font-size;
    vertical-align: middle;

    .dx-list-item-icon-container {
      height: $material-button-icon-size;
      width: $material-button-icon-size;

      @include dx-icon-margin(math.div($material-button-icon-size, 2));

      .dx-icon {
        font-size: $material-button-icon-size;

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

  .dx-toolbar-hidden-button,
  .dx-toolbar-hidden-button-group {
    .dx-toolbar-item-auto-hide {
      padding: 0;
    }

    .dx-button-mode-text,
    .dx-button-mode-outlined,
    .dx-button-mode-contained {
      border: none;

      &.dx-button,
      &.dx-button.dx-button-back {
        border-radius: 0;
      }

      &.dx-button-normal,
      &.dx-button-back {
        @include dx-button-flat-color-styling($button-normal-color, $button-normal-text-hover-bg, $button-normal-text-focused-bg, $button-normal-text-active-bg);
      }

      &.dx-button-default {
        @include dx-button-flat-color-styling($button-default-bg, $button-default-text-hover-bg, $button-default-text-focused-bg, $button-default-text-active-bg);
      }

      &.dx-button-danger {
        @include dx-button-flat-color-styling($button-danger-bg, $button-danger-text-hover-bg, $button-danger-text-focused-bg, $button-danger-text-active-bg);
      }

      &.dx-button-success {
        @include dx-button-flat-color-styling($button-success-bg, $button-success-text-hover-bg, $button-success-text-focused-bg, $button-success-text-active-bg);
      }
    }

    .dx-button {
      height: $material-list-item-height;
      padding: 0;

      .dx-button-text {
        text-transform: none;
        font-weight: 400;
      }

      .dx-button-content {
        padding: 0 $material-list-item-horizontal-padding;
      }
    }
  }

  .dx-button {
    &.dx-button-back:not(.dx-buttongroup-item) {
      border-radius: $material-base-border-radius;
    }
  }

  .dx-toolbar-hidden-button-group {
    margin-top: $material-toolbar-padding;
    margin-bottom: $material-toolbar-padding;

    &:first-of-type {
      margin-top: $material-list-vertical-padding;
    }

    &:last-of-type {
      margin-bottom: $material-list-vertical-padding;
    }

    .dx-buttongroup-wrapper {
      .dx-buttongroup-item.dx-button {
        box-shadow: none;

        .dx-button-content {
          padding: $material-toolbar-padding $material-list-item-horizontal-padding;
        }
      }
    }
  }
}

.dx-toolbar-button {
  &.dx-toolbar-text-auto-hide .dx-button {
    @include dx-button-onlyicon-sizing();

    &.dx-button-has-icon.dx-button-has-text {
      border-radius: 50%;
    }
  }

  .dx-menu {
    .dx-menu-item {
      color: $toolbar-color;
      font-size: $material-base-font-size;
      font-weight: 500;
      height: $material-button-height;

      .dx-menu-item-content {
        padding-top: $material-toolbar-menu-vertical-padding;
        padding-bottom: $material-toolbar-menu-vertical-padding;
      }

      &.dx-menu-item-has-text.dx-menu-item-has-icon {
        .dx-icon {
          @include dx-icon-margin(6px);
        }
      }

      &.dx-state-hover {
        background-color: $button-normal-hover-bg;
      }

      &.dx-state-focused,
      &.dx-state-active {
        background-color: $button-normal-focused-bg;
      }
    }
  }
}

.dx-toolbar .dx-tab {
  padding: 4px;
}