@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 button-color($background-color, $font-color, $box-shadow-color:$gray70, $box-shadow-hover-color: $gray50) {
  background-color: $background-color;
  color: $font-color;

  @if $background-color == white {
    box-shadow: inset 0 0 0 1px $box-shadow-color;
  }

  &:hover {
    @if $background-color != white {
      background-color: mix($background-color, white, 80%);
      color: $font-color;
    } @else if ($background-color == white) {
      @if ($box-shadow-color != $action-color) {
        background-color: mix($background-color, black, 90%);
        box-shadow: inset 0 0 0 1px $box-shadow-hover-color;
        color: $black;
      } @else {
        background-color: $background-color;
      }
    }
  }

  &:active,
  &-active {
    @if $background-color == transparent {
      background-color: $background-color;
    } @else if $background-color != transparent {
      @if ($box-shadow-color == $action-color) {
        background-color: $background-color;
      } @else {
        background-color: mix($background-color, black, 90%);
      }
      color: $font-color;
    }
  }

  &:disabled {
    cursor: not-allowed;
    opacity: .65;

    &:not(.loading) {
      @if $background-color == transparent {
        background-color: $background-color;
      } @else if $background-color != transparent {
        background-color: $gray95 !important;
        box-shadow: none;
      }
      color: $gray50 !important;
    }
  }
}

@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;
  }
}

@mixin label($label-margin-bottom: 5px, $label-color: $gray50, $label-font-size: $font-small) {
  margin-bottom: $label-margin-bottom;
  font-size: $label-font-size;
  color: $label-color;
  line-height: 1;

  &_required {
    &:after {
      content: '*';
      margin-left: 3px;
    }
  }

  &_pull-top {
    margin-top: -20px;
    height: 15px;
  }

  &_big {
    font-size: $font-normal;
  }
}

@mixin radio(
  $c,
  $label-before-top: 50%,
  $label-before-bottom: initial,
  $label-after-top: 50%,
  $label-after-bottom: initial,
  $label-pseudo-left: 0
) {
  $input-check-size: $item * 2;
  $input-check-color-disabled: lighten($gray70, 10%);

  display: none;

  &__label {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: $label-before-top;
      bottom: $label-before-bottom;
      left: $label-pseudo-left;
      margin-top: $input-check-size * -0.5;
      margin-left: $input-check-size * -0.5;
      display: block;
      width: 16px;
      height: 16px;
      background: white;
      border: 1px solid $gray70;
      border-radius: 50%;
    }

    $radio-dot-size: $input-check-size * 0.5;
    $radio-left-indent: ($input-check-size - $radio-dot-size) * 0.5;
    &::after {
      content: '';
      position: absolute;
      top: $label-after-top;
      bottom: $label-after-bottom;
      left: $label-pseudo-left;
      display: block;
      margin-left: $radio-dot-size * -0.5;
      margin-top: $radio-dot-size * -0.5;
      @include size($radio-dot-size);
      background: transparent;
      border-radius: 50%;
    }
  }

  &:checked + #{$c}__label {
    &::before {
      border-color: $action-color;
    }

    &::after {
      background: $action-color;
      transition: background 0.15s ease;
    }
  }

  &[disabled] + #{$c}__label::before,
  &[disabled]:checked + #{$c}__label::before {
    border-color: $input-check-color-disabled;
  }

  &[disabled]:checked + #{$c}__label::after {
    background: #dadada;
  }

  &[disabled] + #{$c}__label {
    color: $gray50;
  }

  &[disabled] + #{$c}__label {
    cursor: not-allowed;
  }
}