@import "settings";
@import "foundation-sites/scss/util/mixins";

/// Set to false to not import the display utility classes
///
/// @type Bool
$bonsai-include-display-utils: $bonsai-include-components !default;

/// Text Alignment Mixin
///
/// @param {String} $direction [left] - Text alignment direction
/// @access private
@mixin text-align($direction: left) {
  text-align: $direction !important;
}

/// Vertical Alignment Mixin
///
/// @param {String} $direction [top] - Text alignment direction
/// @access private
@mixin vertical-align($direction: top) {
  vertical-align: $direction !important;
}

/// Includes just display classes
@mixin display-classes {
  .visuallyhidden {
    @include element-invisible;

    &:focus {
      @include element-invisible-off;
    }
  }

  .block {
    display: block !important;
  }

  .inline-block {
    display: inline-block !important;
  }

  .inline {
    display: inline !important;
  }

  .flex {
    display: flex !important;
  }

  .nowrap {
    white-space: nowrap !important;
  }

  .no-js {
    .no-js-hide {
      display: none !important;
    }
  }

  .required {
    color: $bonsai-alert !important;
  }

  .non-responsive {
    max-width: none !important;
  }

  .align-right {
    justify-content: flex-end !important;
  }

  .align-center {
    justify-content: center !important;
  }

  .align-justify {
    justify-content: space-between !important;
  }

  .align-spaced {
    justify-content: space-around !important;
  }
}

/// Includes just typography classes
@mixin text-alignment-classes {
  .txtr {
    @include text-align(right);
  }

  .txtc {
    @include text-align(center);
  }

  .txtl {
    @include text-align(left);
  }

  .txtt {
    @include vertical-align(top);
  }

  .txtm {
    @include vertical-align(middle);
  }

  .txtb {
    @include vertical-align(bottom);
  }

  .txttt {
    @include vertical-align(text-top);
  }

  .txttb {
    @include vertical-align(text-bottom);
  }
}

// SPACING
// p,m = padding,margin
// a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
// xs,s,m,l,xl,n = extra-small(4px),small(8px),medium(16px),large(24px),extra-large(32px),none(0px)
//
// Generated Spacing Classes
// (p/m)(a/t/r/b/l/h/v)(xs/s/m/l/xl/n)
//
// Examples:
// .phn == padding horizontal none
// .mtl == margin top large

$spacing-style: (padding, margin);
$spacing-side: (all, top, right, bottom, left, horizontal, vertical);

/// Sets the key and the corresponding spacing amount for the generated spacing classes
///
/// @type Map
$spacing-sizes: (
  n: 0 !important,
  xs: $bonsai-spacing-extra-small !important,
  s: $bonsai-spacing-small !important,
  m: $bonsai-spacing-medium !important,
  l: $bonsai-spacing-large !important,
  xl: $bonsai-spacing-extra-large !important
) !default;

/// Includes just spacing classes
@mixin spacing-classes {
  @each $style in $spacing-style {
    @each $side in $spacing-side {
      @each $size, $value in $spacing-sizes {
        $spacing-class: str-slice($style, 1, 1) + str-slice($side, 1, 1) + $size;

        .#{$spacing-class} {
          @if $side == vertical {
            #{$style}-top: $value;
            #{$style}-bottom: $value;
          }

          @else if $side == horizontal {
            #{$style}-left: $value;
            #{$style}-right: $value;
          }

          @else if $side == all {
            #{$style}: $value;
          }

          @else {
            #{$style}-#{$side}: $value;
          }
        }
      }
    }
  }
}

/// Utilities for handling long text in small containers
@mixin overflow-classes {
  .break-with-hyphens {
    word-wrap: break-word;
    hyphens: auto;
  }

  .break-word {
    word-wrap: break-word;
  }
}

/// Includes spacing, text alignment, and display classes
@mixin display-utils {
  @if $bonsai-include-display-utils {
    @include spacing-classes;
    @include text-alignment-classes;
    @include display-classes;
    @include overflow-classes;
  }
}