@import '../shims'; @import '../css3'; @import '../conditionals'; @import '../colours';

// Mixin and defaults for making buttons on GOV.UK services.

// For guidance, see: www.gov.uk/service-manual/design-and-content/resources/buttons.html

// Example usage:

// .button{ // @include button; // } // .button-secondary{ // @include button($grey-3); // } // .button-warning{ // @include button($red); // }

@mixin button($colour: $button-colour) {

// Colour
background-color: $colour;

// Size and shape
position: relative;
@include inline-block;
padding: .526315em .789473em .263157em; // 10px 15px 5px
border: none;
@include border-radius(0);
outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers
outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template
-webkit-appearance: none;

// Bottom edge effect
@include box-shadow(0 2px 0 darken($colour, 15%));
@include ie-lte(8) {
  border-bottom: 2px solid darken($colour, 15%);
}

// Text
font-size: 1em; // inherit from parent
line-height: 1.25;
text-decoration: none;
-webkit-font-smoothing: antialiased;

// Interaction
cursor: pointer;

&:visited {
  background-color: $colour;
}

&:hover,
&:focus {
  background-color: darken($colour, 5%);
}

&:active {
  top: 2px;
  @include box-shadow(0 0 0 $colour);
}

// Disabled button styles
&.disabled,
&[disabled="disabled"],
&[disabled] {
  @include opacity(0.5);
  &:hover {
    cursor: default;
    background-color: $colour;
  }

  &:active {
    top: 0;
    @include box-shadow(0 2px 0 darken($colour, 15%));
    @include ie-lte(8) {
      border-bottom: 2px solid darken($colour, 15%);
    }
  }
}

// Set text colour depending on background colour
@if lightness($colour) < 50% {
  color: $white;

  &:link,
  &:link:focus,
  &:hover,
  &:focus,
  &:visited {
    color: $white;
  }
} @else {
  color: $text-colour;

  &:link,
  &:link:focus,
  &:hover,
  &:focus,
  &:visited {
    color: $text-colour;
  }
}

// making the click target bigger than the button
// (and fill the space made when the button moves)
&:before {
  content: "";
  height: 110%;
  width: 100%;
  display: block;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

&:active:before {
  top: -10%;
  height: 120%;

  // IE6 ignores the :before psuedo-class but applies the block to :active
  // It therefore needs to be reset
  @include ie(6) {
    top: auto;
    height: 100%;
  }
}

// Fixes a bug where IE puts a black border around certain elements
@include ie-lte(8) {
  &[type="submit"],
  &[type="reset"],
  &[type="button"] {
    filter: chroma(color = $black);
  }

  &[type=submit].button {
    filter: none;
  }
}

}