.wayo-stripe{
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  line-height: 1;

  &_disabled{
    .wayo-stripe-button{
      &_stroke{
        border-color: $color-grey-2;
        color: $color-grey-2;
      }
      &_fill{
        background-color: $color-grey-2;
      }
    }
  }
}

.wayo-stripe_size{
  &_default{
    font-size: $font-size-default;
    .wayo-stripe-button{
      padding: 0 15px;
      height: 25px;
      line-height: 25px;
      &_stroke{
        line-height: 23px;
      }
    }
  }
  &_small{
    font-size: $font-size-mini;
    .wayo-stripe-button{
      padding: 0 10px;
      height: 20px;
      line-height: 20px;
      &_stroke{
        line-height: 18px;
      }
    }
  }
  &_large{
    font-size: $font-size-large;
    .wayo-stripe-button{
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
      &_stroke{
        line-height: 28px;
      }
    }
  }
}


.wayo-stripe-button{
  @extend .wayo-button;
  display: block;
  @include border-radius(0px);
  &:first-child{
    border-bottom: none;
    @include border-radius(4px 4px 0 0);
  }
  &:last-child{
    border-top: none;
    @include border-radius(0 0 4px 4px);
  }
  &_stroke{
    background-color: $color-white-1;
    border: solid 1px $color-primary;
    color: $color-primary;
  }
  &_fill{
    @extend .wayo-button-primary;
  }
}

.wayo-stripe-button__icon{
  margin-right: -3px;
}
.wayo-stripe-button__txt{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}