@import "~govuk_frontend_toolkit/stylesheets/design-patterns/buttons";

.button-secondary {
  @include button ($grey-2);

  &:link,
  &:visited {
    background-color: $grey-2;
    color: $black;
  }
}

.button-link {
  line-height: 2.5;
  margin-left: 15px;
  top: 1px;
  position: relative;
}

.button-bar {
  float: none;
  clear: both;
  margin: 30px 0;
}

// modifiers
.button--link {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: $link-colour;
  cursor: pointer;
  padding: .4em 0;
  text-align: left;
  text-decoration: underline;

  &:hover,
  &:active,
  &:focus {
    background: transparent;
    color: $link-colour;
    top: 0;
  }

  &:hover {
    color: $link-hover-colour;
  }
}

.button--compact {
  padding: 0;
}

@import "~govuk_frontend_toolkit/stylesheets/design-patterns/buttons";

.button-secondary {
  @include button ($grey-2);

  &:link,
  &:visited {
    background-color: $grey-2;
    color: $black;
  }
}

.button-link {
  line-height: 2.5;
  margin-left: 15px;
  top: 1px;
  position: relative;
}

.button-bar {
  float: none;
  clear: both;
  margin: 30px 0;
}

// modifiers
.button--link {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: $link-colour;
  cursor: pointer;
  padding: .4em 0;
  text-align: left;
  text-decoration: underline;

  &:hover,
  &:active,
  &:focus {
    background: transparent;
    color: $link-colour;
    top: 0;
  }

  &:hover {
    color: $link-hover-colour;
  }
}

.button--compact {
  padding: 0;
}

.button--small {
  @include core-font(16);
  padding: .3em .6em .15em;
}

Add small variation for button
Add small variation for button

This is to provide a smaller version when appearing in the local
header.
