//
// Button Base
//

// Colour Variables


@mixin colourize($_colour) {
  background-color: $_colour;
  border-color: $_colour;

  @if (lightness($_colour) > 70) {
    // The colour is light, so we want the text colour to be black
    color: $colour-black;
  } @else {
    // The colour is dark, so we want the text colour to be white
    color: #ffffff;
  }

  @if (lightness($_colour) > 30) {
    // The colour is light enough so we want the hover/click effects to darken the background colour
    &:hover {
      background-color: darken($_colour, 5%);
      border-color: darken($_colour, 5%);
    }
    &:active {
      background-color: darken($_colour, 10%);
      border-color: darken($_colour, 10%);
    }
  } @else {
    &:hover {
      background-color: lighten($_colour, 10%);
      border-color: lighten($_colour, 10%);
    }
    &:active {
      background-color: lighten($_colour, 18%);
      border-color: lighten($_colour, 18%);
    }
  }
  &:focus {
    outline: 0;
  }
}

@mixin colourize_invert($_colour) {
  background-color: transparent;
  color: $_colour;
  border-color: $_colour;

  &:hover {
    @if (lightness($_colour) > 30) {
      background-color: $_colour;
    } @else {
      background-color: lighten($_colour, 10%);
      border-color: lighten($_colour, 10%);
    }
    @if (lightness($_colour) > 70) {
      // The colour is light, so we want the text colour to be black
      color: $colour-black;
    } @else {
      // The colour is dark, so we want the text colour to be white
      color: $colour-white;
    }
  }
  &:active {
    @if (lightness($_colour) > 30) {
      background-color: darken($_colour, 10%);
      border-color: darken($_colour, 10%);
    } @else {
      background-color: lighten($_colour, 18%);
      border-color: lighten($_colour, 18%);
    }
    @if (lightness($_colour) > 70) {
      // The colour is light, so we want the text colour to be black
      color: $colour-black;
    } @else {
      // The colour is dark, so we want the text colour to be white
      color: $colour-white;
    }
  }

  &:focus {
    outline: 0;
  }
}

.ccss-button {
  @include colourize($colour-base);
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  padding: 0.5em 1em;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;

  &.invert {
    @include colourize_invert($colour-base);
  }

  &.group-position {
    &.-left {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    &.-middle {
      border-radius: 0;
    }
    &.-right {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }

}

label.ccss-button {
  &>input {
    display: none;
  }
}

.ccss-button.red {
  @include colourize($colour-red);

  &.invert {
    @include colourize_invert($colour-red);
  }
}

.ccss-button.orange {
  @include colourize($colour-orange);

  &.invert {
    @include colourize_invert($colour-orange);
  }
}

.ccss-button.yellow {
  @include colourize($colour-yellow);

  &.invert {
    @include colourize_invert($colour-yellow);
  }
}

.ccss-button.green {
  @include colourize($colour-green);

  &.invert {
    @include colourize_invert($colour-green);
  }
}

.ccss-button.light-blue {
  @include colourize($colour-light-blue);

  &.invert {
    @include colourize_invert($colour-light-blue);
  }
}

.ccss-button.blue {
  @include colourize($colour-blue);

  &.invert {
    @include colourize_invert($colour-blue);
  }
}

.ccss-button.purple {
  @include colourize($colour-purple);

  &.invert {
    @include colourize_invert($colour-purple);
  }
}

.ccss-button.black {
  @include colourize($colour-black);

  &.invert {
    @include colourize_invert($colour-black);
  }
}

.ccss-button.grey {
  @include colourize($colour-dark-grey);

  &.invert {
    @include colourize_invert($colour-dark-grey);
  }
}

// Border radius
.ccss-button.square {
  border-radius: 0;
}

.ccss-button.round {
  border-radius: 12px;
}

.ccss-button.rounder {
  border-radius: 18px;
}

// Sizes
.ccss-button.size-xsmall {
  font-size: 60%;
}

.ccss-button.size-small {
  font-size: 80%;
}

.ccss-button.size-normal {
  font-size: 100%;
}

.ccss-button.size-large {
  font-size: 125%;
}

.ccss-button.size-xlarge {
  font-size: 160%
}

.ccss-button.size-xxlarge {
  font-size: 200%;
}

.ccss-button.size-xxxlarge {
  font-size: 280%;
}