//
// Variables
//

// Dependencies
@import 'config/colors';
@import 'config/fonts';
@import 'config/dimensions';
@import 'config/direction';
@import 'config/typography';

// Declaration
$btn-radius: 5px;

@mixin btn-reset() {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}

@mixin btn-normal() {
  @include typography-h4();
  line-height: 1;
}

@mixin btn() {
  appearance: none;
  transition: background .2s ease-in, color .2s ease-in;
  @include btn-normal();
  background-color: $color-white;
  border: 0;
  border-radius: $btn-radius;
  display: inline-block;
  padding: (.6666 * $spacing-base) $spacing-base;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  .icon {
    vertical-align: middle;
  }
}

@mixin btn-primary($important: null) {
  color: $color-white $important;
  background-color: $color-blue $important;
  @include font-smooth;

  &:link,
  &:visited {
    color: $color-white $important;
    background-color: $color-blue $important;
  }

  &:hover,
  &:focus,
  &:active {
    color: $color-white $important;
    background-color: saturate(lighten($color-blue, 5%), 5%) $important;
  }
}

@mixin btn-secondary($important: null) {
  color: $color-white $important;
  background-color: $color-green-mid $important;
  @include font-smooth;

  &:link,
  &:visited {
    color: $color-white $important;
    background-color: $color-green-mid $important;
  }

  &:hover,
  &:focus,
  &:active {
    color: $color-white $important;
    background-color: saturate(lighten($color-green-mid, 5%), 5%) $important;
  }
}

@mixin btn-next() {
  position: relative;
  padding-#{$text-direction-end}: $spacing-base + 16px;

  &::after {
    content: '';
    position: absolute;
    display: inline-block;

    border-bottom: .3em solid transparent;
    border-#{$text-direction-start}: .4em solid;
    border-#{$text-direction-start}-color: inherit;
    border-top: .3em solid transparent;

    top: 50%;
    margin-top: -.3em;
    margin-#{$text-direction-end}: $spacing-base;
    #{$text-direction-end}: -.3em;
  }
}

@mixin btn-previous() {
  position: relative;
  padding-#{$text-direction-start}: $spacing-base + 16px;

  &::before {
    content: '';
    position: absolute;
    display: inline-block;

    border-bottom: .3em solid transparent;
    border-#{$text-direction-end}: .4em solid;
    border-#{$text-direction-end}-color: inherit;
    border-top: .3em solid transparent;

    top: 50%;
    margin-top: -.3em;
    margin-#{$text-direction-start}: $spacing-base;
    #{$text-direction-start}: -.3em;
  }
}