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

// adduse

.dx-button-mode-contained {
  &.dx-buttongroup-item {
    padding-right: 1px;
  }

  &.dx-buttongroup-last-item {
    padding-right: 0;
  }
}

.dx-button-mode-outlined {
  &.dx-buttongroup-item {
    border-left-width: 0;
  }

  &.dx-buttongroup-first-item {
    border-left-width: 1px;
  }
}

.dx-button-mode-text {
  &.dx-button.dx-buttongroup-item {
    border-radius: $button-border-radius;
  }

  &.dx-buttongroup-first-item {
    margin-left: 0;
  }
}

.dx-button-mode-outlined,
.dx-button-mode-contained {
  &.dx-button.dx-buttongroup-first-item {
    border-top-left-radius: $button-border-radius;
    border-bottom-left-radius: $button-border-radius;
  }

  &.dx-button.dx-buttongroup-last-item {
    border-top-right-radius: $button-border-radius;
    border-bottom-right-radius: $button-border-radius;
  }
}

@mixin dx-buttongroup-item-states($hover-color, $focused-color) {
  &.dx-state-hover {
    background-color: $hover-color;
  }

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

.dx-buttongroup-item {
  &.dx-button {
    &.dx-button-mode-contained,
    &.dx-button-mode-outlined {
      &.dx-state-disabled {
        opacity: 1;

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

    &.dx-button-mode-contained {
      &.dx-button-normal {
        background-color: $button-normal-bg;

        @include dx-buttongroup-item-states($button-normal-hover-bg, $button-normal-focused-bg);

        &.dx-item-selected {
          background-color: $button-group-normal-contained-selected-bg;

          @include dx-buttongroup-item-states($button-group-normal-contained-selected-bg-hover, $button-group-normal-contained-selected-bg-focused);

          &,
          & .dx-icon {
            color: $button-group-normal-selected-color;
          }
        }
      }

      &:not(.dx-item-selected) {
        background-color: $button-normal-bg;

        &.dx-button-success {
          @include dx-buttongroup-item-states($button-group-success-contained-hover-bg, $button-group-success-contained-focused-bg);

          &,
          & .dx-icon {
            color: $button-success-bg;
          }
        }

        &.dx-button-default {
          @include dx-buttongroup-item-states($button-group-default-contained-hover-bg, $button-group-default-contained-focused-bg);

          &,
          & .dx-icon {
            color: $button-default-bg;
          }
        }

        &.dx-button-danger {
          @include dx-buttongroup-item-states($button-group-danger-contained-hover-bg, $button-group-danger-contained-focused-bg);

          &,
          & .dx-icon {
            color: $button-danger-bg;
          }
        }
      }
    }

    &.dx-button-mode-outlined {
      @include dx-buttongroup-item-states($button-normal-outlined-hover-bg, $button-normal-outlined-focused-bg);

      &.dx-button-success {
        @include dx-buttongroup-item-states($button-success-outlined-hover-bg, $button-success-outlined-focused-bg);
      }

      &.dx-button-default {
        @include dx-buttongroup-item-states($button-default-outlined-hover-bg, $button-default-outlined-focused-bg);
      }

      &.dx-button-danger {
        @include dx-buttongroup-item-states($button-danger-outlined-hover-bg, $button-danger-outlined-focused-bg);
      }
    }

    &.dx-button-mode-text {
      @include dx-buttongroup-item-states($button-normal-text-hover-bg, $button-normal-text-focused-bg);

      &.dx-button-success {
        @include dx-buttongroup-item-states($button-success-text-hover-bg, $button-success-text-focused-bg);
      }

      &.dx-button-default {
        @include dx-buttongroup-item-states($button-default-text-hover-bg, $button-default-text-focused-bg);
      }

      &.dx-button-danger {
        @include dx-buttongroup-item-states($button-danger-text-hover-bg, $button-danger-text-focused-bg);
      }
    }

    &.dx-button-mode-outlined,
    &.dx-button-mode-text {
      &.dx-item-selected {
        &.dx-button-normal {
          background-color: $button-group-normal-selected-bg;

          @include dx-buttongroup-item-states($button-group-normal-selected-bg-hover, $button-group-normal-selected-bg-focused);

          &,
          & .dx-icon {
            color: $button-group-normal-selected-color;
          }
        }

        &.dx-button-success {
          background-color: $button-group-success-selected-bg;

          @include dx-buttongroup-item-states($button-group-success-selected-bg-hover, $button-group-success-selected-bg-focused);

          &,
          & .dx-icon {
            color: $button-group-success-selected-color;
          }
        }

        &.dx-button-default {
          background-color: $button-group-default-selected-bg;

          @include dx-buttongroup-item-states($button-group-default-selected-bg-hover, $button-group-default-selected-bg-focused);

          &,
          & .dx-icon {
            color: $button-group-default-selected-color;
          }
        }

        &.dx-button-danger {
          background-color: $button-group-danger-selected-bg;

          @include dx-buttongroup-item-states($button-group-danger-selected-bg-hover, $button-group-danger-selected-bg-focused);

          &,
          & .dx-icon {
            color: $button-group-danger-selected-color;
          }
        }
      }
    }
  }
}

.dx-rtl {
  &.dx-button-mode-outlined,
  &.dx-button-mode-contained {
    &.dx-button.dx-buttongroup-first-item {
      border-radius: 0 $button-border-radius $button-border-radius 0;
    }

    &.dx-button.dx-buttongroup-last-item {
      border-radius: $button-border-radius 0 0 $button-border-radius;
    }

    &.dx-button.dx-buttongroup-first-item.dx-buttongroup-last-item {
      border-radius: $button-border-radius;
    }
  }

  &.dx-button-mode-text {
    &.dx-buttongroup-first-item {
      margin-left: 1px;
    }

    &.dx-buttongroup-last-item {
      margin-left: 0;
    }
  }

  &.dx-button-mode-outlined {
    &.dx-buttongroup-first-item {
      border-left-width: 0;
    }

    &.dx-buttongroup-last-item {
      border-left-width: 1px;
    }
  }
}