@import "font-awesome/scss/variables";

/// CSS Triangle Mixin
///
/// @param {Bool} $size [false] - CSS triangle size
/// @param {Color} $color [map_get($bonsai-palette, primary)] - Css triangle color
/// @param {String} $direction [down] - CSS triangle direction
///
@mixin css-triangle($size: false, $color: map_get($bonsai-palette, primary), $direction: down) {
  @include fa-icon();

  color: $color;
  position: static;

  @if $size {
    font-size: $size;
  }

  @if ($direction == down) {
    content: $fa-var-chevron-down;
  }

  @if ($direction == up) {
    content: $fa-var-chevron-up;
  }

  @if ($direction == left) {
    content: $fa-var-chevron-left;
  }

  @if ($direction == right) {
    content: $fa-var-chevron-right;
  }
}

/// Google Translate Styling
@mixin google-translate-styling {
  @extend .dropdown;
  @extend .button;
  @extend .secondary;

  padding-left: 15px !important;

  a {
    @include no-underline;
  }

  a.goog-te-menu-value {
    color: $bonsai-primary;
    font-size: $bonsai-global-font-size;

    span:not(:first-child) {
      display: none;
    }
  }

  &:hover {
    a.goog-te-menu-value {
      color: $bonsai-very-dark-blue;
    }
  }

  &::after {
    margin-top: 4px;
    margin-left: 0;
  }
}

/// Google Translate Widget Styling
@mixin google-translate-widget() {
  .goog-te-gadget-simple {
    @include google-translate-styling;
  }
}

/// Hide Outline Mixin
@mixin hide-focus-outline {
  outline: 0 !important;
}

/// Cross Browser Box Shadow Mixin
@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
  $if-inset: if($inset, inset, null);

  -webkit-box-shadow: $top $left $blur $spread $color $if-inset;
  -moz-box-shadow: $top $left $blur $spread $color $if-inset;
  box-shadow: $top $left $blur $spread $color $if-inset;
}

/// Indicator Bar Styling Mixin
///
/// @param {String} $direction [bottom] - Indicator bar direction
/// @param {Color} $color [$bonsai-primary] - Indicator bar color
///
@mixin indicator-bar($direction: bottom, $color: $bonsai-primary) {
  @if $direction == bottom or $direction == top {
    @include box-shadow(0, if($direction == bottom, -1, 1) * $bonsai-spacing-base, 0, 0, $color, true);
  }

  @else if $direction == left or $direction == right {
    @include box-shadow(if($direction == right, -1, 1) * $bonsai-spacing-base, 0, 0, 0, $color, true);
  }
}

/// Cross Browser No Styling Mixin
@mixin no-appearance {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/// Scrollbar styling
///
/// @param {String} $direction [y] - Scrollbar direction: x, y, both
/// @param {String} $type [scroll] - Scrollbar type: auto, scroll, hidden..etc
/// @param {String} $size [7px] - Scrollbar width & height
/// @param {Color} $background-color [$bonsai-medium-gray] - Scrollbar color
///
@mixin always-show-scrollbar($direction: y, $type: scroll, $size: 7px, $background-color: $bonsai-medium-gray) {
  @if $direction == x {
    overflow-x: $type;
  }

  @else if $direction == y {
    overflow-y: $type;
  }

  @else if $direction == both {
    overflow: $type;
  }

  /// Needed to automatically display scrollbar-thumb on OSX
  &::-webkit-scrollbar {
    -webkit-appearance: none;

    @if $direction == x {
      height: $size;
    }

    @else if $direction == y {
      width: $size;
    }

    @else if $direction == both {
      height: $size;
      width: $size;
    }
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: $background-color;
    -webkit-box-shadow: 0 0 1px $background-color;
  }
}