@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" 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";

// 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-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 {
      border: none;
      border-radius: 0;
      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-toolbar-hidden-button {
    .dx-button-normal {
      @include dx-button-flat-color-styling(
        $button-normal-color,
        $button-normal-text-bg,
        $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-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-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-bg,
        $button-success-text-hover-bg,
        $button-success-text-focused-bg,
        $button-success-text-active-bg
      );
    }

    .dx-button {
      &.dx-button-has-icon:not(.dx-button-has-text) {
        border-radius: 0;
      }
    }
  }

  .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-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;
        line-height: $material-toolbar-menu-item-line-height;
      }

      &.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-switch {
    display: block;
    line-height: 0;
  }
}

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