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

@mixin nb-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
  scrollbar-face-color: $fg;
  scrollbar-track-color: $bg;
}

@mixin nb-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 nb-right-gradient($left-color, $right-color) {
  background-image: linear-gradient(to right, $left-color, $right-color);
}

@mixin nb-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-thumb() {
  $thumb-selectors: (
    '::-webkit-slider-thumb'
    '::-moz-range-thumb'
    '::-ms-thumb'
  );

  @each $selector in $thumb-selectors {
    &#{$selector} {
      -webkit-appearance: none;
      -moz-appearance: none;
      @content;
    }
  }
}

@mixin install-track() {
  $thumb-selectors: (
    '::-webkit-slider-runnable-track'
    '::-moz-range-track'
    '::-ms-track'
  );

  @each $selector in $thumb-selectors {
    &#{$selector} {
      -webkit-appearance: none;
      -moz-appearance: none;
      @content;
    }
  }
}

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

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ', '};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

/**
 * This mixin generates keyfames.
 * Because of all keyframes can't be scoped,
 * we need to puts unique name in each btn-pulse call.
 */
@mixin btn-pulse($name, $color) {
  &.btn-pulse {
    @include animation(btn-#{$name}-pulse 1.5s infinite);
  }

  @include keyframes(btn-#{$name}-pulse) {
    0% {
      box-shadow: none;
      opacity: nb-theme(btn-disabled-opacity);
    }
    50% {
      box-shadow: 0 0 1rem 0 $color;
      opacity: 0.8;
    }
    100% {
      box-shadow: none;
      opacity: nb-theme(btn-disabled-opacity);
    }
  }
}