@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin spinner($size, $border-width: 6px) {
  @include size($size);
  border: $border-width solid;
  border-color: $gray50 lighten($gray50, 20%) lighten($gray50, 20%);
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}

@mixin content-overlay() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparentize($white, 0.5);
  z-index: layer('contentOverlay');
}

@mixin preloader($loader-size, $loader-border-width: 6px) {
  &:before {
    @include content-overlay;
    content: '';
  }

  &:after {
    @include spinner($loader-size, $loader-border-width);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1 * $loader-size / 2;
    margin-top: -1 * $loader-size / 2;
    display: block;
    z-index: layer('contentOverlay', 1);
  }
}

@mixin arrow-down($height, $color) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: $height $height 0 $height;
  border-color: $color transparent transparent transparent;
}

@mixin arrow-up($height, $color) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 $height $height $height;
  border-color: transparent transparent $color transparent;
}

@mixin input() {
  display: block;
  padding: 0 10px;
  height: $line-height;
  width: 100%;
  font-size: $font-normal;
  background: $white;
  border: 1px solid $gray70;
  border-radius: $border-radius;

  &:focus {
    border-color: $action-color;
    outline: 0;
  }

  &::-ms-clear {
    display: none;
  }

  &::-webkit-input-placeholder {
    color: $gray70;
    font-weight: 100;
  }

  &:-moz-placeholder {
    color: $gray70;
    font-weight: 100;
  }

  &::-moz-placeholder {
    color: $gray70;
    font-weight: 100;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: $gray70;
    font-weight: 100;
  }

  &[disabled] {
    background-color: $gray95;
  }
}