// =============================================================================
// TOOLS / #DIVIDER
// =============================================================================

// Private / Framework Only
// ==============================================

// _divider-gradient-color-points()
// ------------------------------------

// Return a direction's gradient color points.
@function _divider-gradient-color-points($direction, $color) {
  @if $direction == "align-left" or $direction == "align-right" {
    @return $color, rgba($color, 0);
  } @else {
    @return rgba($color, 0), $color, rgba($color, 0);
  }
}

// @include divider-gradient()
// ==============================================

// Mixin to generate a gradient for the divider border.
//
// Example usage:
//
//   .c-divider--top {
//     @include divider-gradient(top, color(grey-20));
//   }
//
// OPTIONS
// - direction:
//    - "top" Creates a horizontal gradient for the top edge
//    - "right" Creates a vertical gradient for the right side
//    - "bottom" Creates a horizontal gradient for the bottom edge
//    - "left" Creates a vertical gradient for the left side
//
@mixin divider-gradient($direction: "bottom", $color: color(grey-20)) {
  // The direction map stores values for the direction for both legacy prefixed
  // and standard gradients for the divider line.
  $directions: (
    top: (
      legacy: "left",
      position: "center bottom",
      standard: "to right"
    ),
    right: (
      legacy: "top",
      position: "right bottom",
      standard: "to bottom"
    ),
    bottom: (
      legacy: "left",
      position: "center bottom",
      standard: "to right"
    ),
    left: (
      legacy: "top",
      position: "left bottom",
      standard: "to bottom",
    ),
    "align-left": (
      legacy: "left",
      position: "center bottom",
      standard: "to right"
    ),
    "align-right": (
      legacy: "right",
      position: "center bottom",
      standard: "to left"
    ),
  );

  @if map-has-key($directions, $direction) {
    // Fetch both the legacy and standard versions for given direction
    $direction-legacy: map-get-deep($directions, $direction, legacy);
    $direction-standard: map-get-deep($directions, $direction, standard);
    // Fetch other gradient properties
    $color-points: _divider-gradient-color-points($direction, $color);
    $position: map-get-deep($directions, $direction, position);
    // Set vendor prefixes for use on legacy gradients
    $vendor-prefixes: "webkit", "moz", "ms", "o";

    background: $color;

    @each $prefix in $vendor-prefixes {
      background: -#{$prefix}-linear-gradient(#{$direction-legacy}, $color-points);
    }

    background: linear-gradient(#{$direction-standard}, $color-points);
  } @else {
    @warn "`#{$direction}` is not a valid direction.";
  }
}

// @include divider-shadow()
// ==============================================

// Mixin to generate a faux-shadow gradient for the divider.
//
// Example usage:
//
//   .c-divider--top {
//     &::after {
//      @include divider-shadow(top, $divider-shadow-color);
//     }
//   }
//
// OPTIONS
// - direction:
//    - "top" Creates a faux-shadow radial gradient for the top edge
//    - "right" Creates a faux-shadow radial gradient for the right side
//    - "bottom" Creates a faux-shadow radial gradient for the bottom edge
//    - "left" Creates a faux-shadow radial gradient for the left side
//
@mixin divider-shadow($direction: "bottom", $color: rgba(color(text), 0.15)) {
  // The direction map stores values for the direction for both legacy prefixed
  // and standard gradients for the divider shadow.
  $directions: (
    top: (
      standard: "at 50% 100%",
      legacy: "50% 100%"
    ),
    right: (
      standard: "farthest-corner at 0 50%",
      legacy: "0 50%, farthest-corner"
    ),
    bottom: (
      standard: "at 50% 0%",
      legacy: "50% 0%"
    ),
    left: (
      standard: "farthest-corner at 100% 50%",
      legacy: "100% 50%, farthest-corner"
    )
  );

  @if map-has-key($directions, $direction) {
    // Fetch both the legacy and standard versions for given direction
    $standard: map-get-deep($directions, $direction, standard);
    $legacy: map-get-deep($directions, $direction, legacy);
    // Fetch other gradient properties
    $color-points: $color, transparent 40%;
    // Set vendor prefixes for use on legacy gradients
    $vendor-prefixes: "webkit", "moz", "ms", "o";

    @each $prefix in $vendor-prefixes {
      background: -#{$prefix}-radial-gradient(#{$legacy}, $color-points);
    }

    background: radial-gradient(#{$standard}, $color-points);
  } @else {
    @warn "`#{$direction}` is not a valid direction.";
  }
}