@import "../common/varible";
@import "button";
@import "input";

.yu-counter {
  font-family: $font-family;
  display: inline-block;
  font-size: 0;
  margin: 0 $space-small $space 0;
  & > .yu-input {
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    & > input {
      width: $counter-input-width;
      border-radius: 0;
      text-align: center;
    }
  }
  & > .yu-button {
    margin: 0;
    font-size: $large;
    line-height: $large;
    background: $background;
    &:first-child {
      border-radius: $radius 0 0 $radius;
    }
    &:last-child {
      border-radius: 0 $radius $radius 0;
    }
  }
}

.yu-counter-side {
  display: inline-block;
  font-size: 0;
  vertical-align: top;
  margin: 0 $space-small $space 0;
  & > .yu-input {
    display: inline-block;
    box-sizing: border-box;
    margin-right: 0;
    & > input {
      width: $counter-input-width;
      text-align: center;
    }
  }
  & > div.right {
    height: $height;
    vertical-align: top;
    display: inline-block;
    & > button {
      height: 50%;
      border: 1px solid $border;
      color: $text;
      padding: 0 $space;
      text-align: center;
      font-family: $font-family;
      transition: all $transition-time ease;
      outline: none;
      display: block;
      vertical-align: top;
      background: $background;
      margin: 0;
      line-height: $height/2;
      & > i {
        margin-left: -2px;
        font-size: $normal;
      }
      &:hover:not(.disabled), &:focus:not(.disabled) {
        color: $primary;
        border: 1px solid lighten($primary, 10);
        background-color: lighten($primary, 35);
      }
      &.disabled {
        color: $text-lighter;
        cursor: not-allowed;
      }
    }
    & > button:first-child {
      border-top-right-radius: $radius;
    }
    & > button:last-child {
      border-bottom-right-radius: $radius;
    }
  }
  & > div.button {
    height: $height;
    vertical-align: top;
    display: inline-block;
    &.large {
      height: $height-large;
    }
    &.small {
      height: $height-small;
      &>button>i:before{
        display: block;
        margin-top: -19px;
      }
    }
    & > button {
      cursor: pointer;
      height: 50%;
      background-color: #fff;
      border: 1px solid $border;
      color: $text;
      padding: 0 $space;
      text-align: center;
      font-family: $font-family;
      transition: all $transition-time ease;
      outline: none;
      display: block;
      vertical-align: top;
      background: $background;
      margin: 0;
      line-height: $height/2;
      & > i {
        margin-left: -2px;
        font-size: $normal;
      }
      &:hover:not(.disabled), &:focus:not(.disabled) {
        color: $primary;
        border: 1px solid lighten($primary, 10);
        background-color: lighten($primary, 35);
      }
      &.disabled {
        color: $text-lighter;
        background: $background;
        cursor: not-allowed;
      }
    }
  }
  &.right {
    & > .button > button:first-child {
      border-top-right-radius: $radius;
    }
    & > .button > button:last-child {
      border-bottom-right-radius: $radius;
    }
    & > .yu-input > input {
      border-radius: $radius 0 0 $radius;
    }
  }
  &.left {
    & > .button > button:first-child {
      border-top-left-radius: $radius;
    }
    & > .button > button:last-child {
      border-bottom-left-radius: $radius;
    }
    & > .yu-input > input {
      border-radius: 0 $radius $radius 0;
    }
  }
}