// RAMEN BUTTON COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $button-padding: Button padding
// $button-padding-medium: Button padding on medium
// $button-background-color: Sets the button background color
// $button-border: Sets the button border
// $button-text-color: Sets the button text color
// $button-font-size: Sets the button font size
// $button-font-size-small: Sets the button font size for small screens
// $button-font-weight: Sets the button font weight
// $button-min-width: Sets the button min width
// $button-hover-background-color: Sets the button background colour for hover state
// $button-hover-text-color: Sets the button text colour for hover state
// $button-secondary-border: Sets the secondary button border
// $button-secondary-background-color: Sets the secondary button background colour
// $button-secondary-text-color: Sets the secondary button text colour
// $button-secondary-hover-background-color: Sets the secondary button background colour for hover state
// $button-secondary-hover-text-color: Sets the secondary button text colour for hover state
//
//

@mixin button-base {
  &,
  &:link,
  &:visited {
    -webkit-appearance: none;
    background-color: $button-background-color;
    border: $button-border;
    color: $button-text-color;
    display: inline-block;
    font-size: $button-font-size-small;
    font-weight: $button-font-weight;
    margin: 0;
    outline: none;
    padding: $button-padding;
    position: relative;
    text-align: center;
    transition: background-color $global-transition-speed $global-easing 0s,
      color $global-transition-speed $global-easing 0s;
    vertical-align: middle;
    width: 100%;

    @include breakpoint($bp-medium) {
      font-size: $button-font-size;
      min-width: $button-min-width;
      padding: $button-padding-medium;
      width: auto;
    }

    &:hover {
      background-color: $button-hover-background-color;
      color: $button-hover-text-color;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.3;

      &:hover {
        background-color: $button-background-color;
        color: $button-text-color;
      }
    }
  }
}

@mixin button-secondary {
  &,
  &:link,
  &:visited {
    background-color: $button-secondary-background-color;
    border: $button-secondary-border;
    color: $button-secondary-text-color;

    &:hover {
      background-color: $button-secondary-hover-background-color;
      color: $button-secondary-hover-text-color;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.3;

      &:hover {
        background-color: $button-secondary-background-color;
        color: $button-secondary-text-color;
      }
    }
  }
}

@mixin button-full-width {
  &,
  &:link,
  &:visited {
    @include breakpoint($bp-medium) {
      width: 100%;
    }
  }
}

.c-button {
  @include button-base;

  &--secondary {
    @include button-secondary;
  }

  &--full-width {
    @include button-full-width;
  }
}