/* Mixins ------------------------------------------------------------------ */

@mixin hide { display: none; }

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

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

@mixin antialiased { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

@mixin no-focus-outline { &:focus { outline: none; } }

@mixin no-outline { @include no-focus-outline; outline: none; border: none; }

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

@mixin no-border-shadow { box-shadow: none; }

@mixin header-back-arrow { @include position(absolute, 0 null null 0); @extend .icon-back; overflow: hidden; height: 40px; }

@mixin header-back-label { @include position(absolute, 0 null null 1em); @include header-button; width: auto; &:before { @include hide; } }

@mixin header-button($color: $positiveColor) {
  display: inline-block; height: 40px; line-height: 2.5; color: $color;
  @include no-focus-outline; &:hover { opacity: .5; }
}

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


/* Menu Title --------------------------------------------- */
@mixin menu-title($color) {
   display: block; position: relative; padding: 1.5em 0 .75em 1em; font-weight: 800; color: $color;
   // TODO: fix size for mobile, menu items too small
}


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

@mixin no-bottom-border { &:after { @include hide; } }

@mixin list-item($color, $activeBgColor, $borderColor) {
  display: block; position: relative; padding: 1em; color: $color; font-weight: 300;
  margin-top: -1px; @include bottom-border($borderColor);
  &.active     { background-color: $activeBgColor; z-index: 1; }
  &:last-child { @include no-bottom-border; }
}


/* Switch ------------------------------------------------- */
@mixin switch {
  $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);
        }
      }
    }
  }
}


/* Spinner ------------------------------------------------ */
@mixin spinner {
  border:      .25em solid rgba($contrastColor, 0.2);
  border-left: .25em solid $contrastColor;
  -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); }
}