@use "../abstracts" as *;

.btn-frame{
  display:block;
  width: 100%;
  padding:0 10px;
  height:40px;
  line-height:40px;
  border-radius:4px;
  text-align:center;
  font-weight:$font-w-500;
  font-size:$font-s-13;
  color: $btn-font-c;
  border: 1px solid #A8B6C7;
  transition: all .15s ease-in-out;
  cursor:pointer;
  &.icon{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.min{
    height: 30px;
    line-height: 30px;
    font-weight: $font-w-500;
  }
  &.login{
    height: 50px;
    line-height: 50px;
    font-size: $font-s-14;
    font-weight: $font-w-600;
    background-color: #0081B5;
    border-color: #0081B5;
    color: $white-fff;
    &:hover{
      background-color: #016c96;
    }
  }
  &:disabled{
    opacity: 0.5;
    background-color: $grey-eee;
    cursor: default;
  }
  .btn-arr{
    display: block;
    width: 7px;
    height: 10px;
    background: url(/assets/images/common/btn_arr.svg)no-repeat center;
    background-size: cover;
    margin-left: 12px;
  }
  .btn-edit{
    display: block;
    width: 10px;
    height: 10px;
    background: url(/assets/images/common/btn_edit.svg)no-repeat center;
    background-size: cover;
    margin-left: 12px;
  }
  .btn-clip{
    display: block;
    width: 18px;
    height: 18px;
    background: url(/assets/images/common/btn_clip.svg)no-repeat center;
    background-size: cover;
    margin-right: 5px;
    transition: all .15s ease-in-out;
  }
  &.d-blue{
    background-color: #5F738E;
    border-color: #5F738E;
    color: $white-fff;
    &:hover{
      background-color: #466388;
    }
  }
  &.n-blue{
    background-color: #7896BA;
    border-color: #7896BA;
    color: $white-fff;
    &:hover{
      background-color: #668cbb;
    }
  }
  &.l-blue{
    background-color: #A8B6C7;
    border-color: #A8B6C7;
    color: $white-fff;
  }
  &.red{
    background-color: #FF5656;
    border-color: #FF5656;
    color: $white-fff;
    &:hover{
      background-color: #db4b4b;
    }
  }
}