/* Not using old button mixin with list array. Let's rethink about it. I find it a abit over engineered */

// CR buttons variations
@mixin cr_button_types($colour, $bg-colour) {
  color: $colour;
  background-color: $bg-colour;
  &:hover,
  &:focus,
  &:active {
    background-color: lighten($bg-colour, 10%);
  }
  &-ghost {
    padding: 19px 40px 15px;
    border: 4px solid $bg-colour;
    color: $bg-colour;
    background-color: transparent;
    background-clip: initial;
    &:hover {
      background-color: $bg-colour;
      color: $colour;
    }
  }
}

// CR links variation
@mixin link($border, $hover) {
  text-decoration: none;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: $border;
  border-bottom: 4px solid $border;
  font-family: $font-bold;
  font-size: 18px;
  line-height: 28px;
  transition-property: border, color;
  transition-duration: 180ms;
  &:hover,
  &:active,
  &:focus {
    border-bottom: 4px solid $hover;
    color: $hover;
  }
  &.inline {
    font-size: inherit;
    line-height: 14px;
    border-bottom: 4px solid rgba($border, 0.5);
    &:hover {
      border-bottom: 4px solid rgba($hover, 0.5);
    }
  }
  &.link--small {
    font-size: 16px;
    line-height: 26px;
  }
}