@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-spin-container {
  overflow: hidden;
  width: $material-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($material-base-icon-size);
}

.dx-numberbox-spin-button {
  padding: $material-numberbox-spin-padding;
  height: 50%;
}

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

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

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

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