// Foundation for Sites
// https://get.foundation
// Licensed under MIT Open Source

////
/// @group prototype-separator
////

/// Responsive breakpoints for separator.
/// @type Boolean
$prototype-separator-breakpoints: $global-prototype-breakpoints !default;

/// Default alignment of a separator.
/// @type String
$prototype-separator-align: center !default;

/// Height of a separator.
/// @type Number
$prototype-separator-height: rem-calc(2) !default;

/// Width of a separator.
/// @type Number
$prototype-separator-width: 3rem !default;

/// Default color of a separator.
/// @type Color
$prototype-separator-background: $primary-color !default;

/// Top Margin of a separator.
/// @type Number
$prototype-separator-margin-top: $global-margin !default;

/// Title separator Utility, mostly used to style the main heading of a section
/// @param {String} $align [$prototype-separator-align] - separator Alignment
/// @param {Number} $height [$prototype-separator-height] - Width
/// @param {Number} $width [$prototype-separator-width] - Height
/// @param {Color} $background [$prototype-separator-background] - Background
/// @param {Number} $top [$prototype-separator-margin-top] - Margin Top
@mixin separator (
  $align: $prototype-separator-align,
  $height: $prototype-separator-height,
  $width: $prototype-separator-width,
  $background: $prototype-separator-background,
  $top: $prototype-separator-margin-top
) {
  text-align: $align !important;
	@include clearfix;

  &::after {
    @include position(relative);
    width: $width;
    border-bottom: $height solid $background;
    margin: $top auto 0;

    @if $align == left {
      margin-left: 0 !important;
    }

    @if $align == right {
      margin-right: 0 !important;
    }
  }
}

@mixin foundation-prototype-separator {
	.separator-center {
		@include separator(center);
	}

  .separator-left {
    @include separator(left);
  }

  .separator-right {
    @include separator(right);
  }

	@if ($prototype-separator-breakpoints) {
    // Loop through Responsive Breakpoints
    @each $size in $breakpoint-classes {
      @include breakpoint($size) {
        @if $size != $-zf-zero-breakpoint {
          .#{$size}-separator-center {
            @include separator(center);
          }
          .#{$size}-separator-left {
            @include separator(left);
          }
          .#{$size}-separator-right {
            @include separator(right);
          }
        }
      }
    }
  }
}
