@use 'sass:math';
@import '../abstract/_all';

.stepper {
  align-items: center;
  border: var(--line-width) solid $c-primary;
  display: inline-flex;
  min-height: 32px;
  min-width: 94px;
}

.stepper-btn {
  position: relative;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  min-height: calc(32px - (var(--line-width) * 2));
  justify-content: center;
  min-width: calc(32px - (var(--line-width) * 2));
  &.disabled {
    pointer-events: none;
    opacity: 0.25;
  }

  &:hover {
    opacity: 0.6;
  }
}

.stepper-btn:active {
  background-color: #ddd;
}

.stepper-input {
  border: none;
  min-height: calc(32px - (var(--line-width) * 2));
  outline: none;
  text-align: center;
  min-width: 28px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}