/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin nga-scrollbars($fg, $bg, $size, $border-radius: $size / 2) {
  ::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  ::-webkit-scrollbar-thumb {
    background: $fg;
    cursor: pointer;
    border-radius: $border-radius;
  }

  ::-webkit-scrollbar-track {
    background: $bg;
  }

  // TODO: remove
  // For Internet Explorer
  body {
    scrollbar-face-color: $fg;
    scrollbar-track-color: $bg;
  }
}

@mixin nga-radial-gradient($color-1, $color-2, $color-3) {
  background: $color-2; /* Old browsers */
  background: -moz-radial-gradient(bottom, ellipse cover, $color-1 0%,
                                                          $color-2 45%,
                                                          $color-3 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(bottom, ellipse cover, $color-1 0%,
                                                             $color-2 45%,
                                                             $color-3 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at bottom, $color-1 0%,
                                                 $color-2 45%,
                                                 $color-3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='$color-1',
                                                     endColorstr='$color-3',
                                                     GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

@mixin nga-right-gradient($left-color, $right-color) {
  background-image: linear-gradient(to right, $left-color, $right-color);
}

@mixin nga-headings($from: 1, $to: 6) {
  @for $i from $from through $to {
    h#{$i} {
      margin: 0;
    }
  }
}

@mixin hover-focus-active {
  &:focus,
  &:active,
  &:hover {
    @content;
  }
}

@mixin center-horizontal-absolute {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
}

@mixin install-placeholder($color, $font-size) {
  $placeholder-selectors: (
    '::-webkit-input-placeholder'
    '::-moz-placeholder'
    ':-moz-placeholder'
    ':-ms-input-placeholder'
  );

  &::placeholder {
    @include placeholder($color, $font-size);
  }

  @each $selector in $placeholder-selectors {
    &#{$selector} {
      @include placeholder($color, $font-size);
    }

    &:focus#{$selector} {
      @include placeholder-focus();
    }
  }
}

@mixin placeholder($color, $font-size) {
  color: $color;
  font-size: $font-size;
  opacity: 1;
  transition: opacity 0.3s ease;
  text-overflow: ellipsis;
}

@mixin placeholder-focus() {
  opacity: 0;
  transition: opacity 0.3s ease;
}