@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "mixins" as *;
@use "../../base/button";

// adduse

.dx-button-content {
  line-height: $material-button-content-line-height;
}

.dx-button-text {
  line-height: $material-button-text-line-height;
  text-transform: $material-button-text-transform;
  font-weight: $material-button-text-font-weight;
  letter-spacing: $material-button-text-letter-spacing;
}

.dx-button {
  @include dx-button-onlyicon-sizing();
}

.dx-button-has-icon {
  @include dx-button-onlyicon-sizing();
}

.dx-button-has-text {
  min-width: $material-button-min-width;

  @include dx-button-withtext-sizing();
}

.dx-button-has-icon.dx-button-has-text {
  @include dx-button-text-and-icon-sizing();
}

.dx-button { // stylelint-disable-line no-duplicate-selectors
  &.dx-button-has-icon:not(.dx-button-has-text) {
    &:not(.dx-shape-standard) {
      border-radius: 50%;
      box-shadow: none;
    }
  }
}

// NOTE: Button styles

.dx-button { // stylelint-disable-line no-duplicate-selectors
  height: $material-button-height;
  position: relative;

  .dx-button-content {
    position: relative;

    .dx-inkripple {
      overflow: hidden;
      display: block;
    }
  }

  @include dx-button-styling(
    $button-normal-color,
    $button-normal-bg,
    $button-normal-hover-bg,
    $button-normal-focused-bg,
    $button-normal-active-bg,
    $button-normal-icon-color,
    $button-normal-selected-bg,
    $button-normal-selected-color,
  );

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

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

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

.dx-button-mode-contained {
  &,
  &.dx-state-hover {
    box-shadow: $material-button-box-shadow-size $button-hover-shadow-color;
  }

  &.dx-state-focused {
    box-shadow: $material-button-box-shadow-size $button-focused-shadow-color;
  }

  &.dx-state-active {
    box-shadow: $material-button-active-box-shadow-size $button-active-shadow-color;
  }
}

.dx-button-mode-text {
  @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,
    $button-normal-text-selected-bg,
    $button-normal-selected-color,
  );

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

  &.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,
      $button-danger-text-selected-bg,
      $button-danger-text-selected-color,
    );
  }

  &.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,
      $button-success-text-selected-bg,
      $button-success-text-selected-color,
    );
  }
}

.dx-button-mode-outlined {
  @include dx-button-outlined-color-styling(
    $button-normal-color,
    $button-normal-border-color,
    $button-normal-outlined-bg,
    $button-normal-outlined-hover-bg,
    $button-normal-outlined-focused-bg,
    $button-normal-outlined-active-bg,
    $button-normal-outlined-selected-bg,
    $button-normal-selected-color,
  );

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

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

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