@import "../../common/variables";
@import "./common";

.#{$ns}-numeric-input {
  // we need a very-specific selector here to override specificicty of selectors defined elsewhere.
  .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
    // let the buttons shrink to equal heights
    flex: 1 1 calc(var(--bp-surface-spacing) * 3 - 1);
    min-height: 0;
    padding: 0;
    width: calc(var(--bp-surface-spacing) * 6);
  }

  &.#{$ns}-large .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
    width: calc(var(--bp-surface-spacing) * 10);
  }

  &.#{$ns}-small .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
    width: calc(var(--bp-surface-spacing) * 6);
  }
}