// Buttons
@mixin sr_button_types($colour, $bg-colour) {
  color: $colour;
  background-color: $bg-colour;

  // To animate the hover-state position
  transition: 0.3s;

  &:hover,
  &:focus {
    transform: translateY(-3px);
  }

  &-ghost {
    padding: 20px 29px;
    border: 1px solid $bg-colour;
    color: $bg-colour;
    background-color: transparent;
    background-clip: initial;
    box-shadow:inset 0px 0px 0px 1px $bg-colour;

    &:hover,
    &:focus  {
      box-shadow:inset 0px 0px 0px 3px $bg-colour;
      transform: translateY(-3px);
    }
  }
}


@mixin gradient-background($colour1, $colour2) {
  background-color: transparent;
  background-image: linear-gradient(90deg, $colour1 0%, $colour2 100%);
}

// Links
@mixin link_colour($colour) {
  border-bottom: 1px solid $colour;
  color: $colour;
}

//SR19 button style
@mixin sr19_button_types($colour, $bg-colour, $hover-colour, $hover-bg-colour) {
  transition: none;
  letter-spacing: normal;
  font-weight: 900;
  color: $colour;
  background-color: $bg-colour;

  &:hover,
  &:focus {
    color: $hover-colour;
    background-color: $hover-bg-colour;
  }

  &-ghost {
    font-weight: 900;
    padding: 20px 29px;
    border: 1px solid $bg-colour;
    color: $bg-colour;
    background-color: transparent;
    background-clip: initial;
    box-shadow:inset 0px 0px 0px 1px $bg-colour;

    &:hover,
    &:focus  {
      box-shadow:inset 0px 0px 0px 3px $bg-colour;
    }
  }
}

@mixin sr20_button_types($colour, $bg-colour) {
  color: $colour;
  background-color: $bg-colour;
  background-color: rgba($bg-colour, 0.8);

  &:hover,
  &:focus,
  &:active {
    background-color: rgba($bg-colour, 1.0);
  }
}