// =======================================================
// BUTTONS
// Mixin and defaults for doing buttons on GOV.UK services


@mixin button($colour: $green){
  // Colour
  background-color: $colour;

  // Size and shape
  position: relative;
  top: 0; // Reset for application.css. Remove once integrated.
  @include inline-block;
  padding: 0.35em 0.5em 0.15em 0.5em;
  border: none;
  @include border-radius(0.250em);

  // 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 size from parent
  line-height: 1.25;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;

  // Interaction
  cursor: pointer;
  &:visited{
    background-color: $colour;
  }
  &:hover,
  &:focus {
    background: darken($colour, 5%);
  }
  &:active {
    top: 2px;
    @include box-shadow(0 0 0 $colour);
  }

  // Disabled button styles
  &.disabled,
  &[disabled="disabled"],
  &[disabled] {
    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;
    &:hover,
    &:focus,
    &:visited{
      color: $white;
    }
  } @else {
    color: $text-colour;
    &: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%;
    }
  }

  // Reset styles applied to external links
  &[rel="external"]:after {
    display: none;
    content: none;
    margin-left: 0;
    margin-right: 0;
  }

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

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

// default classes

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