@import 'common/var.scss';

.qf-button {
  border-radius: 2px;
  font-size: 13px;
  color: #5c6073;
  height: 36px;
  padding: 0 16px;
  line-height: 1.23;
  box-sizing: border-box;
  outline: 0 none !important;
  cursor: pointer;

  background-color: #fff;
  border: solid 1px $--color-border;
  box-shadow: 0 1px 3px 0 rgba(97, 100, 114, 0.1);

  .qf-icon {
    font-size: 14px;
    line-height: normal;
  }

  &:focus {
    border: solid 1px $--color-focus;
  }

  &:hover {
    background-color: #fef5f7;
    box-shadow: 0 1px 3px 0 rgba(249, 62, 97, 0.1);
    border: solid 1px #fdb2c0;
  }

  &.is-active,
  &:active {
    background-color: #fee2e8;
    box-shadow: 0 1px 3px 0 rgba(249, 62, 97, 0.1);
    border: solid 1px #fb8fa4;
  }

  &.is-disabled {
    cursor: not-allowed;
    background-color: #ffffff;
    border: solid 1px $--color-border;
    box-shadow: none;
    color: $--color-border;
  }
}

.qf-button + .qf-button {
  margin-left: 12px;
}

.qf-button.qf-button-primary {
  background-color: #f93e61;
  box-shadow: 0 1px 3px 0 rgba(249, 62, 97, 0.4);
  border: 1px solid #f93e61;
  color: #fff;

  .qf-icon {
    color: #fff;
  }

  &:hover {
    background-color: #fa5171;
  }

  &:focus {
    border: solid 1px $--color-focus;
  }

  &.is-active,
  &:active {
    background-color: #df3757;
  }

  &.is-disabled {
    background-color: $--color-border;
    border-color: $--color-border;
    box-shadow: none;
  }
}

.qf-button.qf-button-minor {
  background-color: #5c6073;
  box-shadow: 0 1px 3px 0 rgba(92, 96, 115, 0.4);
  border: 1px solid #5c6073;
  color: #fff !important;

  .qf-icon {
    color: #fff;
  }

  &:hover {
    background-color: #da4664;
    box-shadow: 0 1px 3px 0;
  }

  &:focus {
    border: solid 1px $--color-focus;
  }

  &.is-active,
  &:active {
    background-color: #7f5c6e;
  }

  &.is-disabled {
    background-color: $--color-border;
    border-color: $--color-border;
    box-shadow: none;
  }
}

.qf-button.qf-button-link {
  border: none;
  padding: 0 0;
  color: $--color-link;
  box-shadow: none;
  background: transparent;

  .qf-icon {
    color: $--color-link;
  }

  &:hover {
    background: transparent;
    color: $--color-primary;
    .qf-icon {
      color: $--color-primary;
    }
  }

  &:focus {
    background: transparent;
  }

  &.is-active,
  &:active {
    background: transparent;
    color: $--color-primary;
    .qf-icon {
      color: $--color-primary;
    }
  }

  &.is-disabled {
    background: transparent;
    color: $--color-border !important;
    .qf-icon {
      color: $--color-border !important;
    }
  }
}

.qf-button.qf-button-large {
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

.qf-button.qf-button-small {
  height: 32px;
}