@import 'variables.less';

.ra-button-control {
  min-width: @ra-btn-control-size;
  height: @ra-btn-control-size;
  background-color: @ra-control-bg-color;
  border-width: 0;
  border-radius: @ra-btn-control-border-radius;
  outline: 0;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 ((@ra-btn-control-size - @ra-btn-icon-size) / 2);
  box-shadow: @ra-control-shadow;
  line-height: 16px;

  .ra-iconfont {
    fill: @ra-control-font-color;
    color: @ra-control-font-color;
    width: @ra-btn-icon-size;
    height: @ra-btn-icon-size;
  }

  &.ra-button-control--row {
    padding: 0 16px 0 13px;

    * + .ra-button-control__text {
      margin-left: 8px;
    }
  }

  &.ra-button-control--column {
    height: @ra-btn-column-height;
    flex-direction: column;
    .ra-iconfont {
      margin-top: 3px;
    }
    .ra-button-control__text {
      margin-top: 3px;
      font-size: 10px;
      transform: scale(0.83333);
    }
  }

  &:not(:disabled) {
    &:hover {
      background-color: @ra-btn-control-bg-hover-color;
    }
    &:active {
      background-color: @ra-btn-control-bg-active-color;
    }
  }
  &:disabled {
    background-color: @ra-btn-control-disabled-bg-color;
    color: @ra-btn-control-disabled-font-color;
    cursor: not-allowed;
    .ra-iconfont {
      fill: @ra-btn-control-disabled-font-color;
      color: @ra-btn-control-disabled-font-color;
    }
    &:hover {
      background-color: @ra-btn-control-disabled-bg-color;
    }
    &:active {
      background-color: @ra-btn-control-disabled-bg-color;
    }
  }
}