AugurProject/augur-ui

.button {
  .border;

  align-items: center;
  border-radius: 3px;
  color: @color-text-light;
  cursor: pointer;
  display: flex;
  font-size: @font-size-medium;
  font-weight: bold;
  justify-content: center;
  letter-spacing: 0.3px;
  min-height: 2.5rem;
  min-width: 9.75rem;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;

  &:disabled,
  &.button--disabled {
    background-color: @color-disabled;
    color: @color-text-disabled;
    cursor: default;
  }

  &.imperative {
    background-color: @color-red;
  }

  &.navigational {
    cursor: pointer;
  }

  &:visited {
    color: @color-text-light;
  }
}

.button--text-only {
  .button;

  background-color: transparent;
  color: inherit;
}

.button--purple {
  .button;

  background-color: @color-purple;
  color: @color-white;

  &:hover {
    background-color: @color-lightpurple;
  }
}

.button--purple--disabled,
.button--purple:disabled,
.button--purple:disabled:hover {
  background-color: @color-lightgray;
  color: @color-lightergray;
  cursor: default;
}

.button--lightpurple {
  .button;

  background-color: @color-lightpurple;
  color: @color-white;

  &:hover {
    background-color: #6a528a;
  }
}

.button--lightpurple--disabled,
.button--lightpurple:disabled,
.button--lightpurple:disabled:hover {
  background-color: @color-lightgray;
  color: @color-lightergray;
  cursor: default;
}

.button--offWhite {
  .button;

  background-color: @color-offwhite;
  color: @color-purple;

  &:hover {
    background-color: @color-white;
  }
}

.button--offWhite--disabled,
.button--offWhite:disabled,
.button--offWhite:disabled:hover {
  background-color: @color-lightgray;
  color: @color-lightergray;
  cursor: default;
}

.button--disabled {
  background-color: @color-disabled;
  color: @color-text-disabled;
  cursor: default;

  &:hover {
    background-color: @color-disabled;
  }
}

.button--transparent {
  .button;

  background-color: @color-transparent;
  border: solid 1px @color-purple;
  border-radius: 32px;
  color: @color-purple;
  line-height: unset;
  min-height: unset;
  min-width: unset;
  padding: 8px 24px;
  text-transform: none;

  &:hover,
  &:visited:hover {
    background-color: @color-lightpurple;
    color: @color-white;
  }

  &:disabled,
  &:disabled:hover {
    background-color: transparent;
    border: 1px solid @color-lightgray;
    color: @color-lightgray;
    cursor: default;
  }

  &:visited {
    color: @color-purple;
  }
}

.button--transparent--disabled,
.button--transparent:disabled,
.button--transparent:disabled:hover {
  background-color: transparent;
  border: 1px solid @color-lightgray;
  color: @color-lightgray;
  cursor: default;
}

.button--white--short {
  .button;

  background-color: @color-white;
  color: @color-text-dark;

  &:hover {
    background-color: @color-lightpurple;
    color: @color-white;
  }

  &:disabled,
  &:disabled:hover {
    background-color: @color-lightgray;
    color: @color-lightergray;
    cursor: auto;
  }
}

.button--white {
  .button--white--short;

  padding: 1.1em 2em;
}

.button--gray {
  .button;

  background-color: @color-transparent;
  border: 2px solid @color-gray;
  color: @color-gray;

  &:hover {
    background-color: @color-lightgray;
    border: 2px solid black;
    color: black;
  }
}

.button--gray--disabled,
.button--gray:disabled,
.button--gray:disabled:hover {
  background-color: @color-lightgray;
  color: @color-lightergray;
  cursor: default;
}