@import '../../style/mixins';
@import '../../style/themes/default';

@prefixCls: bs-icon-button;

.icon-style(@height, @width) {
  height: @height;
  width: @width;
}

.text-style(@fontFamily, @fontSize, @color) {
  font-size: @fontSize;
  color: @color;
}

.@{prefixCls} {
  .@{prefixCls}-disabled {
    .@{prefixCls}-active {
      opacity: 0.25;
    }
    .@{prefixCls}-icon-button-column {
      opacity: 0.25;
      pointer-events: none;
    }
  }
  .@{prefixCls}-icon-button-wrapper {
    .@{prefixCls}-icon-button-row.ative{
      .hairline('all', #6B7175, 100px);
    }
    .@{prefixCls}-icon-button-row {
      .hairline('all', #fff, 100px);
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      .@{prefixCls}-icon-button-icon {
        .icon-style(70%, 70%);
        display: inline-block;
        flex: 1;
        margin-right: -15%;
        color: #fff;
      }
      .@{prefixCls}-icon-button-text {
        .text-style(PingFangSC-Regular, 12px, black);
        display: inline-block;
        text-align: center;
        flex: 2;
      }
    }
    .@{prefixCls}-icon-button-column {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .@{prefixCls}-icon-button-icon {
        .icon-style(24%, 24%);
        margin-bottom: 5%;
        color: #fff;
      }
    }
  }

}
.bs-icon-button-active {
  opacity: 0.8;
}