MaxMilton/ekscss

/*
* Fancy button styles
*/

// Prevent default link hover styles
a.button:hover,
a.button:focus {
  color: currentcolor;
}

.button {
  font-weight: ${x.textWeightMedium};
  background-image: linear-gradient(${x.button.level3.backgroundColorFrom}, ${x.button.level3.backgroundColorTo});

  &:hover {
    background-color: ${x.button.level3.hoverBackgroundColor};
    background-image: none;
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled {
    font-weight: unset;
    background-image: none;
  }
}

.button-primary {
  border-color: ${x.button.primary.borderColor};
  color: ${x.button.primary.textColor};
  background-image: linear-gradient(${x.button.primary.backgroundColorFrom}, ${x.button.primary.backgroundColorTo});

  &:hover {
    background-color: ${x.button.primary.hoverBackgroundColor};
    background-image: none;
  }
}

// TODO: How often is this button style actually used? Remove?
.button-success {
  border-color: ${x.button.success.borderColor};
  color: ${x.button.success.textColor};
  background-image: linear-gradient(${x.button.success.backgroundColorFrom}, ${x.button.success.backgroundColorTo});

  &:hover {
    background-color: ${x.button.success.hoverBackgroundColor};
    background-image: none;
  }
}

.button-danger {
  border-color: ${x.button.danger.borderColor};
  color: ${x.button.danger.textColor};
  background-image: linear-gradient(${x.button.danger.backgroundColorFrom}, ${x.button.danger.backgroundColorTo});

  &:hover {
    background-color: ${x.button.danger.hoverBackgroundColor};
    background-image: none;
  }
}