// Utility module's mixin definitions are here. For the module itself
// check `_utility.scss`.
// Generic border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-generic-name : The name of the class used for the generic border.
@mixin make-border-generic ($border-generic-name) {
  .#{$border-generic-name} {
    border: 1px solid rgba(0,0,0, 0.25) !important;
  }
}
// Generic radial border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-radial-name : The name of the class used for the radial border.
// - $border-radial-radius : The border radius used for the radial border.
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
  .#{$border-radial-name} {
    border-radius: $border-radial-radius !important;
  }
}
// Generic box shadow mixin. ATTENTION: Uses !important.
// Variables:
// - $box-shadow-name : The name of the class used for the generic box shadow.
// - $box-shadow-value : The box shadow value of the generic box shadow.
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
  .#{$box-shadow-name} {
    box-shadow: $box-shadow-value !important;
  }
}
// Responsive margin mixin. ATTENTION: Uses !important.
// Variables:
// - $margin-name : The name of the class used for the responsive margin.
// - $margin-small-value : Responsive margin value for smaller screens.
// - $margin-medium-value : Responsive margin value for medium screens.
// - $margin-large-value : Responsive margin value for large screens.
// - $margin-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive margin. Defaults to `768px`.
// - $margin-large-breakpoint : (Optional) Large screen breakpoint for the responsive margin. Defaults to `1280px`.
// - $margin-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
// - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-margin-responsive ($margin-name, $margin-small-value,
  $margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
  $margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
  $margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
  @if $margin-use-four-step-grid {
    .#{$margin-name} {
      margin: $margin-extra-small-value !important;
    }
    @media screen and (min-width: #{$margin-small-breakpoint}) {
      margin: $margin-small-value !important;
    }
  }
  @else {
    .#{$margin-name} {
      margin: $margin-small-value !important;
    }
  }
  @media screen and (min-width: #{$margin-medium-breakpoint}) {
    .#{$margin-name} {
      margin: $margin-medium-value !important;
    }
  }
  @media screen and (min-width: #{$margin-large-breakpoint}) {
    .#{$margin-name} {
      margin: $margin-large-value !important;
    }
  }
}
// Responsive padding mixin. ATTENTION: Uses !important.
// Variables:
// - $padding-name : The name of the class used for the responsive padding.
// - $padding-small-value : Responsive padding value for smaller screens.
// - $padding-medium-value : Responsive padding value for medium screens.
// - $padding-large-value : Responsive padding value for large screens.
// - $padding-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive padding. Defaults to `768px`.
// - $padding-large-breakpoint : (Optional) Large screen breakpoint for the responsive padding. Defaults to `1280px`.
// - $padding-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
// - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-padding-responsive ($padding-name, $padding-small-value,
  $padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
  $padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
  $padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
  @if $padding-use-four-step-grid{
    .#{$padding-name} {
      padding: $padding-extra-small-value !important;
    }
    @media screen and (min-width: #{$padding-small-breakpoint}) {
      padding: $padding-small-value !important;
    }
  }
  @else {
    .#{$padding-name} {
      padding: $padding-small-value !important;
    }
  }
  @media screen and (min-width: #{$padding-medium-breakpoint}) {
    .#{$padding-name} {
      padding: $padding-medium-value !important;
    }
  }
  @media screen and (min-width: #{$padding-large-breakpoint}) {
    .#{$padding-name} {
      padding: $padding-large-value !important;
    }
  }
}
// Responsive hidden elements mixin. ATTENTION: Uses !important.
// Variables:
// - $hidden-prefix : The prefix for the name of the class used for the responsive hiding.
// - $hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive hiding. Defaults to `768px`.
// - $hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive hiding. Defaults to `1280px`.
// - $hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive hiding. Defaults to 'sm'.
// - $hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive hiding. Defaults to 'md'.
// - $hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive hiding. Defaults to 'lg'.
// - $hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
  $hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
  $hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
  $hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
  @if $hidden-use-four-step-grid {
    @media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
      .#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
        display: none !important;
      }
    }
    @media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
      .#{$hidden-prefix}-#{$hidden-small-suffix} {
        display: none !important;
      }
    }
  }
  @else {
    @media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
      .#{$hidden-prefix}-#{$hidden-small-suffix} {
        display: none !important;
      }
    }
    @media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
      .#{$hidden-prefix}-#{$hidden-medium-suffix} {
        display: none !important;
      }
    }
    @media screen and (min-width: #{$hidden-large-breakpoint}) {
      .#{$hidden-prefix}-#{$hidden-large-suffix} {
        display: none !important;
      }
    }
  }
}
// Responsive visually hidden elements mixin. ATTENTION: Uses !important.
// Variables:
// - $visually-hidden-prefix : The prefix for the name of the class used for the responsive visual hiding.
// - $visually-hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive visual hiding. Defaults to `768px`.
// - $visually-hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive visual hiding. Defaults to `1280px`.
// - $visually-hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'sm'.
// - $visually-hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'md'.
// - $visually-hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'lg'.
// - $visually-hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
  $visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
  $visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
  $visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
  @if $visually-hidden-use-four-step-grid {
    @media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        border: 0 !important;
        padding: 0 !important;
        clip: rect(0 0 0 0) !important;
        -webkit-clip-path: inset(100%) !important;
        clip-path: inset(100%) !important;
        overflow: hidden !important;
      }
    }
    @media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        border: 0 !important;
        padding: 0 !important;
        clip: rect(0 0 0 0) !important;
        -webkit-clip-path: inset(100%) !important;
        clip-path: inset(100%) !important;
        overflow: hidden !important;
      }
    }
  }
  @else {
    @media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        border: 0 !important;
        padding: 0 !important;
        clip: rect(0 0 0 0) !important;
        -webkit-clip-path: inset(100%) !important;
        clip-path: inset(100%) !important;
        overflow: hidden !important;
      }
    }
    @media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        border: 0 !important;
        padding: 0 !important;
        clip: rect(0 0 0 0) !important;
        -webkit-clip-path: inset(100%) !important;
        clip-path: inset(100%) !important;
        overflow: hidden !important;
      }
    }
    @media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
      .#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        border: 0 !important;
        padding: 0 !important;
        clip: rect(0 0 0 0) !important;
        -webkit-clip-path: inset(100%) !important;
        clip-path: inset(100%) !important;
        overflow: hidden !important;
      }
    }
  }
}
