/**
* 统一按钮样式，分为normal、hover、active、disabled
*/
@import "./variable/_colors.scss";
@import "./mixins/_button-mixin.scss";
/*主要按钮，绿色*/
.btn-primary-large{
    @include btnCreater(1);
    &>span{ &:before{ margin-right: 8px; color: $white;}}
    &:hover>span{ &:before{ color: $white;}}
    &:active>span{ &:before{ color: $white;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 15px;
    }
}
.btn-primary-medium{
    @include btnCreater(1,2);
    &>span{ &:before{ margin-right: 8px; color: $white;}}
    &:hover>span{ &:before{ color: $white;}}
    &:active>span{ &:before{ color: $white;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 12px;
    }
}
.btn-primary-small{
    @include btnCreater(1,3);
    &>span{ &:before{ margin-right: 8px; color: $white;}}
    &:hover>span{ &:before{ color: $white;}}
    &:active>span{ &:before{ color: $white;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 9px;
    }
}
/*白底黑字按钮*/
.btn-plain-large{
    @include btnCreater(2);
    &>span{ &:before{ margin-right: 8px; color: $green;}}
    &:hover>span{ &:before{ color: $green;}}
    &:active>span{ &:before{ color: $green;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 15px;
    }
}
.btn-plain-medium{
    @include btnCreater(2,2);
    &>span{ &:before{ margin-right: 8px; color: $green;}}
    &:hover>span{ &:before{ color: $green;}}
    &:active>span{ &:before{ color: $green;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 12px;
    }
}
.btn-plain-small{
    @include btnCreater(2,3);
    &>span{ &:before{ margin-right: 8px; color: $green;}}
    &:hover>span{ &:before{ color: $green;}}
    &:active>span{ &:before{ color: $green;}}
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 9px;
    }
}
/*红色按钮*/
.btn-red-large{
    @include btnCreater(3);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 15px;
    }
}
.btn-red-medium{
    @include btnCreater(3,2);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 12px;
    }
}
.btn-red-small{
    @include btnCreater(3,3);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 9px;
    }
}
/*蓝色按钮*/
.btn-blue-large{
    @include btnCreater(4);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 15px;
    }
}
.btn-blue-medium{
    @include btnCreater(4,2);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 12px;
    }
}
.btn-blue-small{
    @include btnCreater(4,3);
    &.two-letter {
      letter-spacing: 5px;
      padding-right: 9px;
    }
}

.btn-text{
    @include btnBasic;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: $green-500;
    background: none;
    border: none;
    font-size: 14px !important;
    &:hover {
        color: $green-400;
    }
}
.btn-text-small{
  @include btnBasic;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: $green-500;
  background: none;
  border: none;
  font-size: 12px !important;
  &:hover {
    color: $green-400;
  }
}
.btn-text-black{
  @include btnBasic;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: $grey;
  background: none;
  border: none;
  font-size: 14px !important;
  &:hover{
    color: $green-350;
  }
}

.btn-text-red {
  @include btnBasic;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: $red-500;
  background: none;
  border: none;
  font-size: 14px !important;
  &:hover {
    color: $red-350;
  }
}

.btn-text-black-small{
  @include btnBasic;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: $grey;
  background: none;
  border: none;
  font-size: 12px !important;
  &:hover{
    color: $green-350;
  }
}
.btn-icon-text{
    @include btnBasic;
    color: $grey;
    background: none;
    border: none;
    &:hover{ color: $green;}
    &>span{ &:before{ margin-right: 8px; color: $grey-secondary;}}
    &:hover>span{ &:before{ color: $green;}}
    &:active>span{ &:before{ color: $green;}}
}
.btn-icon-text-self{
  @include btnBasic;
  color: $grey;
  background: none;
  border: none;
  font-size: 14px;
  padding: 0px;
  &:hover{ color: $green; svg{fill: $green}}
  &>icon{  margin-right: 8px; color: $grey-secondary;vertical-align: middle}
  &:hover>span{ &:before{ color: $green;}}
  &:active>span{ &:before{ color: $green;}}
}
.btn-link{
    @include btnBasic;
    color: $green-500;
    background: none;
    border-style: solid;
    border-width: 1px;
    border-color: transparent transparent $green transparent;
    padding-bottom: 2px;
}