@import "../../mixins/button-variant";
@import "../../base/design-tokens";
@import "../../base/legacy-config";

.btn--tertiary {
  @include button-variant($colour-grey-darkmid, #fff, $colour-grey-darkmid);
  text-transform: uppercase;

  &:hover,
  &:focus {
    @include button-variant($color-clickable-600, #fff, $color-clickable-600);
  }
}

.btn--danger {
  @include button-variant($colour-red, transparent, $colour-red);
  text-transform: uppercase;
  &:hover,
  &:focus {
    @include button-variant($colour-red-dark, transparent, $colour-red-dark);
  }
}

.btn--block {
  width: 100%;
  text-transform: uppercase;
  & + & {
    margin-top: 20px;
  }
}

.btn--block-max-medium {
  text-transform: uppercase;
  @media (min-width: $breakpoint-medium) {
    width: auto;
  }

  & + & {
    @media (min-width: $breakpoint-medium) {
      margin-top: 0;
    }
  }
}