@import (reference) "../style/themes/default.less";

.am-stepper {
  &-content {
    display: flex;
    position: relative;
    height: @size-6;
    height: var(--am-stepper-height, @size-6);
    overflow: hidden;
    font-size: @font-size-subtitle;
    border: @border-width-standard solid @color-divider-line;
    border: var(--am-stepper-borderWidth, @border-width-standard) solid var(--am-stepper-borderColor, @color-divider-line);
    background-color: @color-fill-grey-inverse;
    background-color: var(--am-stepper-bgc, @color-fill-grey-inverse);
    border-radius: @corner-radius-sm;
    border-radius: var(--am-stepper-borderRadius, @corner-radius-sm);
    box-sizing: border-box;
  }
  &-input {
    height: @size-6;
    height: var(--am-stepper-input-size, @size-6);
    padding: 0;
    margin: 0 @v-spacing-standard;
    margin: 0 var(--am-stepper-input-marginLR, v-spacing-standard);
    line-height: @size-6;
    line-height: var(--am-stepper-input-size, @size-6);
    text-align: center;
    font-size: @font-size-subtitle;
    font-size: var(--am-stepper-input-fontSize, @font-size-subtitle);
    color: @color-text-title;
    color: var(--am-stepper-input-color, @color-text-title);
    border: 0 none;
    background-color: transparent;
    transform: translate(0, -1px);
    &-hide {
      visibility: hidden;
    }
  }
  &-option {
    display: flex;
    flex: 0 0 @size-6;
    flex: 0 0 var(--am-stepper-btn-size, @size-6);
    height: @size-6;
    height: var(--am-stepper-btn-size, @size-6);
    justify-content: center;
    align-items: center;
    border: @border-width-standard solid @color-divider-line;
    border: var(--am-stepper-borderWidth, @border-width-standard) solid var(--am-stepper-borderColor, @color-divider-line);
    border-radius: @corner-radius-sm;
    border-radius: var(--am-stepper-borderRadius, @corner-radius-sm);
    box-sizing: border-box;
  }
  &-reduce {
    position: relative;
    transform: translate(-1px, -1px);
    &::before {
      content: "";
      display: inline-block;
      width: @size-2;
      width: var(--am-stepper-btn-reduce, @size-2);
      height: 1px;
      overflow: hidden;
      background-color: @color-text-primary;
      background-color: var(--am-stepper-btn-color, @color-text-primary);
      border-radius: @corner-radius-circle;
    }
  }
  &-add {
    transform: translate(1px, -1px);
    .am-icon {
      font-size: @size-3;
      font-size: var(--am-stepper-btn-add, @size-3);
      color: @color-text-primary;
      color: var(--am-stepper-btn-color, @color-text-primary);
    }
  }
}
