@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &btn{
    @include button;
    @include var-height();
    position:relative;
    box-sizing:border-box;
    background-color:#fff;
    @include var-border-radius();
    font-size: inherit;
    cursor: default;
    &.is-disabled{
      pointer-events: none;
      &:before{
        @include _disabled;
        background:#fff;
      }
      &:not(.is-plain){
        @include disabled;
      }
    }
    &.is-loading{
      pointer-events: none;
    }
    &.is-round{
      border-radius: $--box-size-height-default;
    }
    &.is-square{
      border-radius:0;
      &:before{
        border-radius:0!important;
      }
    }
    &--size{
      &-large{
        width:100%;
        display:block;
      }
      &-small{
        @include var-height($--box-size-height-small);
        padding: 0 0.05rem;
      }
    }
    &--default{
      &.is-plain{
        @include border-round;
      }
    }
    &:active{
      box-shadow:0 0 0 2rem rgba(0,0,0,0.15) inset;
    }
    &.is-ripple{
      &:active{
        box-shadow:none;
      }
    }
    &--primary{
      @include var-background-color();
      color:#fff;
      &.is-plain{
        background-color:#fff;
        @include var-color();
        @include border-round($--color-primary);
      }
    }
    &--warning{
      @include var-background-color($--color-warning);
      color:#fff;
      &.is-plain{
        background-color:#fff;
        @include var-color($--color-warning);
        @include border-round($--color-warning);
      }
      .vx-spinner{
        @include var-border-color($--color-warning,'border-top-color');
      }
    }
    &--danger{
      @include var-background-color($--color-danger);
      color:#fff;
      border:0;
      &.is-plain{
        background-color:#fff;
        @include var-color($--color-danger);
        @include border-round($--color-danger);
      }
      .vx-spinner{
        @include var-border-color($--color-danger,'border-top-color');
      }
    }
    &--link{
      @include var-color();
      border-radius:0;
      height:auto;
      background: transparent;
    }
    span{
      margin:0 0.1rem;
    }
    input{
      @include overlay;
      opacity:0;
    }
    .#{$--css-prefix}spinner{
      &--wrapper{
        width:0.32rem;
        height:0.32rem;
      }
    }
    .vx-ripple{
      position:absolute;
      height:100%;
      width:100%;
      z-index:1;
      top:0;
      left:0;
    }
  }
}