@import "../colors.scss";

button, a.button {
  background-image: linear-gradient(
    $btn-primary-background-top,
    $btn-primary-background-bottom
  );
  color: white;
  border: solid 1px $btn-primary-background-bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 5rem;
  border-radius: 0.3rem;
  padding: 0.15rem 1rem;
  font-weight: 600;
  margin: 0.2rem 0.5rem;

  &:active {
    border-color: $btn-primary-active-border;
    background-image: linear-gradient(
      $btn-primary-active-background-top,
      $btn-primary-active-background-bottom
    );
  }

  &.secondary {
    background-image: none;
    background-color: $btn-secondary-background;
    border-color: $btn-secondary-border;
    color: #222;
    font-weight: 500;

    &:active {
      background-color: $btn-secondary-active-background;
      border-color: $btn-secondary-active-border;
    }
  }

  &.help {
    border-radius: 10em;
    padding: 0;
    background-image: none;
    background-color: #eeeeee;
    color: #333;
    border-color: #bbb;
    min-width: min-content;
    width: 1.5rem;
    height: 1.5rem;

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

  &.icon {
    padding-left: 0;
    padding-right: 0;
    min-width: 25px;
    width: 25px;
  }
}