// Refactoring:
// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_buttons.scss
// https://raw.githubusercontent.com/alphagov/govuk_elements/master/public/sass/elements/_buttons.scss
// .button

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

  @include inline-block;

  @include border-radius(0);

  position: relative;
  padding: .526315em .789473em .263157em; // 10px 15px 5px

  border: none;
  background-color: $colour;


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

  cursor: pointer;

  -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%);
  }

  &: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 {
      background-color: $colour;
      cursor: default;
    }

    &: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,
    &:hover,
    &:focus,
    &:visited {
      color: $white;
    }
  } @else {
    color: $text-colour;

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

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

    content: "";
   }

  &: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;
      margin-right: 0;
      margin-left: 0;
      content: none;
    }
  }

  // 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);
    }

    // sass-lint:disable force-element-nesting
    &[type="submit"].button {
      filter: none;
    }
    // sass-lint:enable force-element-nesting
  }
}

.gv-c-button {
  @include button ($button-colour);

  @include box-sizing (border-box);
  vertical-align: top;

  @include media (mobile) {
    width: 100%;
  }

  // Fix unwanted button padding in Firefox
  &:-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  &:focus {
    outline: 3px solid $focus-colour;
  }
}

.gv-c-button--disabled {
  background: $button-colour;
}

.gv-c-button--disabled:focus {
  outline: none;
}

.gv-c-button--start {
  @include bold-24;

  padding: em(7) em(41) em(4) em(16);

  background-image: file-url("toolkit/icon-pointer.png");
  background-repeat: no-repeat;
  background-position: 100% 50%;

  @include device-pixel-ratio {
    background-image: file-url("toolkit/icon-pointer-2x.png");
    background-size: 30px 19px;
  }

  @include ie(6) {
    background-image: file-url("toolkit/icon-pointer-2x.png");
  }
}
