@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" as *;
@use "../textEditor/sizes" as *;
@use "../textEditor/colors" as *;
@use "../../base/numberBox";

// adduse
@use "../textEditor" as *;

.dx-numberbox {
  &.dx-editor-outlined,
  &.dx-editor-filled {
    .dx-numberbox-spin-up {
      border-start-end-radius: $base-border-radius;
    }

    .dx-numberbox-spin-down {
      border-end-end-radius: $base-border-radius;
    }
  }
}

.dx-numberbox-spin-container {
  overflow: hidden;
  width: $fluent-numberbox-spin-container-width;

  .dx-state-disabled & {
    opacity: 1;
  }
}

.dx-numberbox-spin-up-icon {
  @include dx-icon(spinup);

  color: $numberbox-spin-icon-color;
}

.dx-numberbox-spin-down-icon {
  @include dx-icon(spindown);

  color: $numberbox-spin-icon-color;
}

.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
  @include dx-icon-font-centered-sizing($fluent-base-icon-size);
}

.dx-numberbox-spin-button {
  height: 50%;

  &.dx-state-hover {
    background-color: $numberbox-spin-icon-background-hover;
  }

  &.dx-state-active {
    background-color: $numberbox-spin-icon-background-active;
  }

  &.dx-state-disabled {
    .dx-numberbox-spin-up-icon,
    .dx-numberbox-spin-down-icon {
      color: $base-foreground-disabled;
    }
  }
}

.dx-numberbox-spin.dx-numberbox-box {
  @include validation-icon-position();
}

.dx-numberbox-spin-touch-friendly {
  @include validation-icon-position();

  .dx-numberbox-spin-container {
    width: $fluent-numberbox-touch-friendly-spin-container-width;
    border-inline-start: none;
  }

  .dx-numberbox-spin-up-icon,
  .dx-numberbox-spin-down-icon {
    background-position: center;
  }
}