/* Mixins ------------------------------------------------------------------ */
@mixin absolutePosition($coordinates: null null null null) {
  position: absolute; top: nth($coordinates, 1); right: nth($coordinates, 2); bottom: nth($coordinates, 3); left: nth($coordinates, 4); }

@mixin truncate {
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

@mixin user-select-none {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}

@mixin border($color) {
  &:after { content: ''; display: block; height: 1px;
            background-color: $color; @include position(absolute, 0px 0px null 1em); }
}

@mixin noBorder { &:after { display: none; } }

@mixin noFocus { &:focus { outline: none; } }

@mixin customScrollbar {
  &::-webkit-scrollbar { width: 6px; background-color: $neutralColor; }
  &::-webkit-scrollbar-thumb { background-color: $contrastColor; border-radius: 3px; }
}

@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

@mixin spinner {
  border:      .25em solid rgba($positiveColor, 0.2);
  border-left: .25em solid $positiveColor;
  -webkit-animation: spinning 1.1s infinite linear; animation: spinning 1.1s infinite linear;
  &, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
}

@-webkit-keyframes spinning {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spinning {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@mixin headerButton($color: $positiveColor) {
  color: $color; &:hover { opacity: .5; }
}

@mixin shadow {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

@mixin switchControl() {
  $switch-width: 52px;
  $switch-padding: 2px;
  $switch-height: 32px;
  $switch-radius: $switch-height;
  $knob-size: $switch-height - ($switch-padding * 2);
  $knob-radius: $switch-height - ($switch-padding * 2);
  $knob-width: $knob-size;
  $switch-background: $white;
  $switch-border-background: $contrastColor;
  $switch-shadow: 0 0px 2px transparentize(black, 0.6);

  border-radius: $switch-radius;
  cursor: pointer;
  display: inline-block;
  height: $switch-height;
  position: relative;
  width: $switch-width;

  input[type="checkbox"] {
    display: none;

    + .checkbox {
      @include transition(all 0.3s ease);
      background: $switch-border-background;
      border-radius: $switch-radius;
      border: none;
      cursor: pointer;
      height: $switch-height;
      margin: 0;
      padding: 0;
      position: relative;
      width: $switch-width;
      z-index: 0;

      &:before {
        @include position(absolute, 2px 0 0 2px);
        @include transform(scale(1));
        @include transition(all 0.3s ease);
        background: $switch-background;
        border-radius: $switch-radius;
        content: "";
        height: $knob-radius;
        width: $switch-width - ($switch-padding * 2);
        z-index: 1;
      }

      &:after {
        @include position(absolute, 2px 0 0 2px);
        @include transition(all 0.3s ease);
        @include size($knob-size);
        background: $switch-background;
        border-radius: $knob-radius;
        box-shadow: $switch-shadow;
        content: "";
        z-index: 2;
      }
    }

    &:checked {
      + .checkbox {
        background: $positiveColor;

        &:before {
          @include transform(scale(0));
        }

        &:after {
          left: $switch-width - $knob-width - ($switch-padding);
        }
      }
    }
  }
}