@mixin button ($background, $border, $color, $background-hover, $border-hover, $color-hover, $shadow) {
  background-color: $background;
  border-color: $border;
  border-radius: 45px;
  border-style: solid;
  border-width: setting-get('input border width');
  color: $color;
  display: inline-block;
  font-size: ms(-1);
  font-weight: setting-get('bold font weight');
  letter-spacing: 1px;
  padding: .5em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  transition: setting-get('translate transition');

  &:hover,
  &:focus {
    background-color: $background-hover;
    border-color: $border-hover;
    box-shadow: -5px 5px 0 0 $shadow;
    color: $color-hover;
    transform: translate(setting-get('rhythm') / 4, setting-get('rhythm') / -4);
  }

  &:active {
    box-shadow: 0 0 0 0 transparent;
    transform: translate(0, 0);
  }
}

@mixin base--button {
  @include button(setting-get('primary accent color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary color'), setting-get('primary color'));
}

@mixin dl {
  display: block;
}

@mixin dd {
  margin-left: setting-get('rhythm') / .75;

  @include breakpoint(setting-get('fixed container')) {
    margin-left: setting-get('rhythm') / .5;
  }
}

@mixin dt {
  background-color: color('white');
  font-weight: setting-get('bold font weight');
  padding: setting-get('rhythm') / 2 setting-get('rhythm') / .75;

  @include breakpoint(setting-get('fixed container')) {
    padding: setting-get('rhythm') / 2 setting-get('rhythm') / .5;
  }
}

@mixin checkbox {
  opacity: 0;

  + label {
    position: relative;

    &::before {
      background: setting-get('white');
      border: setting-get('input border width') solid setting-get('primary color');
      content: '';
      display: inline-block;
      height: 1.25em;
      transform: translateX(setting-get('rhythm') / -1.25) translateY(setting-get('rhythm') / -8);
      vertical-align: middle;
      width: 1.25em;
    }
  }

  &:checked + label {
    border-color: setting-get('primary color');

    &::before {
      background: setting-get('primary color');
      box-shadow: inset 0 0 0 setting-get('input border width') / 1.5 setting-get('white');
    }
  }

  &:focus {
    outline: 0 none;

    + label {

      &::before {
        outline: setting-get('input border width') solid setting-get('primary accent color');
      }
    }
  }
}

@mixin h1 {
  font-size: ms(4);
  font-weight: 200;
}

@mixin h2 {
  font-size: ms(3);
  font-weight: 200;
}

@mixin input {
  background: setting-get('white');
  border: setting-get('input border width') solid setting-get('white');
  border-radius: setting-get('input border radius');
  color: setting-get('black');
  display: block;
  margin-top: setting-get('rhythm') / 2;
  padding: .3em .5em;
  transform: translate(0, 0);
  transition: setting-get('translate transition');
  width: 100%;

  &:focus {
    border-color: setting-get('primary color');
    box-shadow: -7px 7px 0 0 setting-get('primary color');
    outline: setting-get('primary color');
    transform: translate(setting-get('rhythm') / 4, setting-get('rhythm') / -4);
  }

  &:disabled {
    background-color: color('grey', 20);
    border-color: color('grey', 20);
  }
}

@mixin link ($border-color, $color, $border-color-hover, $color-hover) {
  border-bottom: 2px solid $border-color;
  color: $color;
  text-decoration: none;

  &:hover {
    border-color: $border-color-hover;
    color: $color-hover;
    transition: setting-get('fade');
  }
}

@mixin base--link {
  @include link(setting-get('active link color'), setting-get('active link color'), setting-get('secondary link color'), setting-get('secondary link color'));
}

@mixin radio {
  opacity: 0;

  + label {
    position: relative;

    &::before {
      background: setting-get('white');
      border: setting-get('input border width') solid setting-get('primary color');
      border-radius: 50%;
      content: '';
      display: inline-block;
      height: 1.25em;
      transform: translateX(setting-get('rhythm') / -1.25) translateY(setting-get('rhythm') / -7);
      vertical-align: middle;
      width: 1.25em;
    }
  }

  &:checked + label {
    &::before {
      background: radial-gradient(setting-get('primary color') 50%, setting-get('white') 50%);
    }
  }

  &:focus {
    outline: 0 none;

    + label {

      &::before {
        box-shadow: 0 0 0 setting-get('input border width') setting-get('primary accent color');
      }
    }
  }
}

@mixin range--thumb($prefix: null, $range: null) {
  @if $prefix != null {
    $prefix: '-#{$prefix}-';
  }

  &::#{$prefix}#{$range}-thumb {
    #{$prefix}appearance: none;
    background: color('white');
    border-radius: setting-get('range thumb size');
    box-shadow: inset 0 0 0 setting-get('range outline width') * 1.5 setting-get('primary color');
    height: setting-get('range thumb size');
    transition-duration: .5s;
    width: setting-get('range thumb size');
  }

  &:focus,
  &:active {
    &::#{$prefix}#{$range}-thumb {
      box-shadow: inset 0 0 0 setting-get('range outline width') * 10 setting-get('primary color');
      height: setting-get('range thumb size') * 1.25;
      width: setting-get('range thumb size') * 1.25;
    }
  }
}

@mixin range {
  @include input;
  background: setting-get('primary accent color');
  border: 5px solid setting-get('primary accent color');
  border-radius: setting-get('range height');
  box-shadow: inset 0 0 0 0 transparent;
  height: setting-get('range height');
  margin-top: setting-get('rhythm');
  padding: 0;

  &:focus {
    background-color: setting-get('primary color');
    box-shadow: inset 0 0 0 setting-get('range outline width') setting-get('primary color');
    outline: 0;
    transform: none;

    &::-moz-range-track {
      appearance: none;
      background-color: setting-get('primary color');
      box-shadow: inset 0 0 0 setting-get('range outline width') setting-get('primary color');
    }
  }

  &:disabled {
    opacity: .5;
  }

  &::-moz-range-track {
    appearance: none;
    background-color: setting-get('primary accent color');
    border-radius: setting-get('range height');
    height: setting-get('range height');
    padding: 0;
  }
}

@mixin wrapper {
  margin: 0 auto;
  max-width: setting-get('fixed container');
  padding: 0 setting-get('rhythm') / .5;

  @include breakpoint(setting-get('fixed container break')) {
    padding: 0;
  }
}