@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: 0;
}

.dx-button-text {
  line-height: $material-button-height - 2 * $material-button-vertical-padding - 1;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.dx-button a {
  text-decoration: none;
}

.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-mode-text {
    @include dx-button-mode-text-withtext-sizing();
  }
}

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

  &.dx-button-mode-text {
    @include dx-button-mode-text-withtext-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

@mixin dx-button-styling-variant(
  $background-color, $text-color, $shadow-color,
  $hover-background-color, $hover-shadow-color, $focused-background-color,
  $focused-shadow-color, $active-background-color, $active-shadow-color,
  $disabled-background-color, $icon-color
) {
  background-color: $background-color;
  color: $text-color;
  box-shadow: $shadow-color;

  .dx-icon {
    color: $icon-color;
  }

  &.dx-state-hover {
    background-color: $hover-background-color;
    box-shadow: $hover-shadow-color;
  }

  &.dx-state-focused {
    background-color: $focused-background-color;
    box-shadow: $focused-shadow-color;
  }

  &.dx-state-active {
    background-color: $active-background-color;
    box-shadow: $active-shadow-color;
  }

  &.dx-state-disabled {
    background: $disabled-background-color;
    box-shadow: none;

    .dx-icon {
      opacity: $button-disabled-icon-opacity;
    }

    .dx-button-text {
      color: $button-disabled-text-color;
    }
  }

  .dx-inkripple-wave {
    background-color: color.change($text-color, $alpha: 0.2);
  }
}


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

  .dx-button-content {
    position: relative;

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

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

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

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

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

  &.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);

    border-radius: 50%;

    @include dx-button-onlyicon-sizing();

    .dx-button-text {
      display: none;
    }
  }
}


.dx-button-mode-text {
  @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-mode-outlined {
  @include dx-button-outlined-color-styling($button-normal-color, color.change($button-normal-color, $alpha: 0.24), $button-normal-outlined-hover-bg, $button-normal-outlined-focused-bg, $button-normal-outlined-active-bg);

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

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

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