@import './variables.less';
@import './functions.less';

.@{namespace}-button {
  .setCssVar(table-btn-color, #606266);
  .setCssVar(table-btn-bg-hover, #f3f4f6);
  .setCssVar(table-btn-color-border, #dcdfe6);
  .setCssVar(table-btn-border, 1px solid .getCssVar(table-btn-color-border) []);
  .setCssVar(table-btn-confirm-color-border, #409eff);
  .setCssVar(table-btn-confirm-bg, #409eff);
  .setCssVar(table-btn-confirm-hover, #79bbff);
  .setCssVar(table-btn-confirm-outline-focus-visible, 2px solid #a0cfff);

  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  line-height: 1;
  margin: 0;
  padding: 8px 16px;
  border-radius: 4px;
  border: .getCssVar(table-btn-border) [];
  color: .getCssVar(table-btn-color) [];
  background-color: transparent;
  font-size: 14px;
  cursor: pointer;
  & + & {
    margin-left: 6px;
  }
  &:hover {
    background-color: .getCssVar(table-btn-bg-hover) [];
  }
  &.confirm {
    border-color: .getCssVar(table-btn-confirm-color-border) [];
    background-color: .getCssVar(table-btn-confirm-bg) [];
    color: #fff;
    &:hover {
      border-color: .getCssVar(table-btn-confirm-hover) [];
      background-color: .getCssVar(table-btn-confirm-hover) [];
    }
    &:focus-visible {
      outline: .getCssVar(table-btn-confirm-outline-focus-visible) [];
      outline-offset: 1px;
    }
  }
}