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

// adduse

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

    &.dx-state-hover .dx-button-content {
      border-radius: 0;
    }
  }

  &.dx-buttongroup-first-item {
    padding-left: 0;
    border-left-width: $generic-button-border-weight;

    &.dx-button,
    &.dx-state-hover .dx-button-content {
      border-top-left-radius: $button-border-radius;
      border-bottom-left-radius: $button-border-radius;
    }
  }

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

    &.dx-button,
    &.dx-state-hover .dx-button-content {
      border-top-right-radius: $button-border-radius;
      border-bottom-right-radius: $button-border-radius;
    }
  }
}

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

@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-outlined,
    &.dx-button-mode-contained {
      &.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-contained-bg-hover, $button-normal-contained-bg-focused);

        &.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-default {
          border-color: $button-default-border-color;

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

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

        &.dx-button-success {
          border-color: $button-success-border-color;

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

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

        &.dx-button-danger {
          border-color: $button-danger-border-color;

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

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

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

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

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

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

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

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

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

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

    &.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-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-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-button-success,
        &.dx-button-success .dx-icon {
          color: $button-group-success-selected-color;
        }

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

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

.dx-rtl {
  &.dx-button-mode-outlined,
  &.dx-button-mode-contained {
    &.dx-buttongroup-first-item {
      border-left-width: 0;
      padding-left: 1px;
      padding-right: 0;

      &.dx-button,
      &.dx-state-hover .dx-button-content {
        border-radius: 0 $button-border-radius $button-border-radius 0;
      }
    }

    &.dx-buttongroup-last-item {
      border-left-width: $generic-button-border-weight;
      padding-right: 1px;
      padding-left: 0;

      &.dx-button,
      &.dx-state-hover .dx-button-content {
        border-radius: $button-border-radius 0 0 $button-border-radius;
      }

      &.dx-buttongroup-first-item {
        &.dx-button,
        &.dx-state-hover .dx-button-content {
          border-radius: $button-border-radius;
        }
      }
    }
  }

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

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