//
// Underline
// -------------------------------------------
$underline-width:   5rem !default;
$underline-size:    3px !default;
$underline-bottom:  -2px !default;
$underline-left:    0 !default;
$underline-color:   $primary-color !default;
$underline-sizes: (
  tiny: 1px,
  small: 2px,
  default: $underline-size,
) !default;

$underline-palette: $foundation-palette !default;

@mixin style-underline($color: $underline-color) {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: $underline-width;
    height: $underline-size;
    background-color: $color;
    bottom: $underline-bottom;
    left: $underline-left;
  }
}

@mixin style-underline-color($color: $underline-color) {
  &::after {
    background-color: $color;
  }
}

@mixin style-underline-center() {
  &::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@mixin style-underline-size($size: $underline-size) {
  &::after {
    height: $size;
  }
}

.underline {
  @include style-underline;

  // Colors
  @each $name, $color in $underline-palette {
    &.underline-#{$name} {
      @include style-underline-color($color);
    }
  }

  // Sizes
  @each $size, $value in map-remove($underline-sizes, default) {
    &.underline-#{$size} {
      @include style-underline-size($value);
    }
  }

  &.underline-center {
    @include style-underline-center;
  }
}