WeAreGenki/minna-ui

/**
 * BUTTONS
 *
 * @format
 */

.button {
  display: inline-block;
  padding: $button-padding-y $button-padding-x;
  color: inherit;
  font-weight: $button-text-weight;
  line-height: inherit;
  text-decoration: none;
  vertical-align: middle;
  background-color: $button-background-color;
  border: $button-border;
  border-radius: $button-radius;
  box-shadow: $button-shadow;
  user-select: none;

  &:hover,
  &:focus {
    text-decoration: none;
    background-color: $button-hover-background-color;
  }

  &:active {
    background-color: $button-active-background-color;
    /**
     * FIXME: Try using an inverted shadow so it looks like the button is
     * pressed in (see chrome settings page for reference).
     */
    box-shadow: none;
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus {
    color: $button-disabled-text-color;
    background-color: $button-background-color;
    border: 1px solid $button-disabled-border-color;
    box-shadow: none;
  }
}

/* Remove browser default `<button>` styles */

.button-clear {
  background: transparent;
  border: 0;
  box-shadow: none;

  &:hover,
  &:focus {
    /* prevent change when applied to links */
    color: unset;
  }
}

/* Fix link whitespace when next to `.button` */

.button-link {
  display: inline-block;
  margin: 0;
  padding: $button-padding-y $button-padding-x;
  line-height: $line-height;
}

/* Smaller button */

.button-mini {
  padding: $button-mini-padding;
}