@use 'sass:math';
@use 'sass:string';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

/* ==========================================================================
   Design System
   Utilities
   ========================================================================== */

//
// JS-only
//

.u-js-only {
  .no-js & {
    display: none !important;
  }
}

//
// To hide an element when JS is on
// And show it when JS is off
//

.u-hide-if-js {
  display: none !important;
  .no-js & {
    display: block !important;
  }
}

//
// Media type utilities.
//
.u-print-only {
  @media screen {
    display: none;
  }
}

.u-screen-only {
  @media print {
    display: none;
  }
}

//
// Clearfix
//

@mixin u-clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.u-clearfix {
  @include u-clearfix;
}

//
// Visually hidden
//
@mixin u-visually-hidden() {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;

  // `clip` is deprecated, but retained for safety in making sure that this
  // utility works as expected for screenreaders. Comma-separated syntax is
  // not used because space-separated is more backward-compatible,
  // per https://developer.mozilla.org/en-US/docs/Web/CSS/clip
  clip: rect(0 0 0 0); /* stylelint-disable-line property-no-deprecated */
}

.u-visually-hidden {
  @include u-visually-hidden;
}

//
// Width-specific display
//

.u-hide-on-mobile {
  // Mobile only.
  @include respond-to-max($bp-xs-max) {
    display: none;
  }
}

.u-show-on-mobile {
  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    display: none;
  }
}

//
// Hide an element.
//

.u-hidden {
  display: none !important;
}

//
// Hide an element while retaining its layout.
//

@mixin u-invisible() {
  visibility: hidden;
}

.u-invisible {
  @include u-invisible;
}

//
// Floating right
//

.u-right {
  float: right;
}

//
// Don't break a word across a line break.
//

.u-nowrap {
  white-space: nowrap;
}

//
// Flexible proportional containers
//

/* stylelint-disable selector-class-pattern */
@mixin u-flexible-container-mixin($width: 16, $height: 9) {
  /* stylelint-enable */
  $ratio: math.div($height, $width) * 100;

  position: relative;
  padding-bottom: string.unquote('#{$ratio}%');
  height: 0;
}

.u-flexible-container {
  @include u-flexible-container-mixin;

  &__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &--4-3 {
    @include u-flexible-container-mixin(4, 3);
  }
}

//
// Link mixins
//

/*
Link text and underline, unless otherwise specified.
$c: Link color.
$v: Link visited color.
$h: Link hover color.
$f: Link focus color.
$a: Link active color.

// Separate out a different underline color.
$bc: Link underline color.
$bv: Link underline visited color.
$bh: Link underline hover color.
$bf: Link underline focus color.
$ba: Link underline active color.
*/
/* stylelint-disable selector-class-pattern */
@mixin u-link-colors(
  $c: '',
  $v: '',
  $h: '',
  $f: '',
  $a: '',
  $bc: '',
  $bv: '',
  $bh: '',
  $bf: '',
  $ba: ''
) {
  @if $c !=
    '' and
    $v !=
    '' and
    $h !=
    '' and
    $f !=
    '' and
    $a !=
    '' and
    $bc !=
    '' and
    $bv !=
    '' and
    $bh !=
    '' and
    $bf !=
    '' and
    $ba !=
    ''
  {
    @include u-link-colors-base($c, $v, $h, $f, $a, $bc, $bv, $bh, $bf, $ba);
  } @else if $c != '' and $v != '' and $h != '' and $f != '' and $a != '' {
    @include u-link-colors-base($c, $v, $h, $f, $a, $c, $v, $h, $f, $a);
  } @else if $c != '' and $v != '' {
    @include u-link-colors-base($c, $c, $v, $v, $c, $c, $c, $v, $v, $c);
  } @else if $c != '' {
    @include u-link-colors-base($c, $c, $c, $c, $c, $c, $c, $c, $c, $c);
  } @else {
    @include u-link-colors-base;
  }
}

@mixin u-link-colors-base(
  $c: $link-text,
  $v: $link-text-visited,
  $h: $link-text-hover,
  $f: $link-text,
  $a: $link-text-active,
  $bc: $link-underline,
  $bv: $link-underline-visited,
  $bh: $link-underline-hover,
  $bf: $link-underline,
  $ba: $link-underline-active
) {
  color: $c;
  text-decoration-color: $bc;

  &:visited,
  &.visited {
    text-decoration-color: $bv;
    color: $v;
  }

  &:hover,
  &.hover {
    text-decoration-color: $bh;
    color: $h;
  }

  &:focus,
  &.focus {
    text-decoration-color: $bf;
    color: $f;
  }

  &:active,
  &.active {
    text-decoration-color: $ba;
    color: $a;
  }
}
/* stylelint-enable */

// Turn off the default bottom `border` on the default and `:hover` states.
@mixin u-link-no-border() {
  text-decoration-line: none !important;
}

// Turn off the default bottom `border` on the default state,
// but force a bottom border on the `:hover` state.
@mixin u-link-hover-border() {
  text-decoration-line: none !important;

  &:hover,
  &.hover,
  &:focus,
  &.focus {
    text-decoration-line: underline !important;
  }
}

//
// Margin utilities
//

.u-mt0 {
  margin-top: 0 !important;
}

.u-mb0 {
  margin-bottom: 0 !important;
}

.u-mt5 {
  margin-top: 5px !important;
}

.u-mb5 {
  margin-bottom: 5px !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-mt15 {
  margin-top: 15px !important;
}

.u-mb15 {
  margin-bottom: 15px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-mt45 {
  margin-top: 45px !important;
}

.u-mb45 {
  margin-bottom: 45px !important;
}

.u-mt60 {
  margin-top: 60px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

//
// Width utilities
//

.u-w100pct {
  width: 100%;
}

.u-w90pct {
  width: 90%;
}

.u-w80pct {
  width: 80%;
}

.u-w70pct {
  width: 70%;
}

.u-w60pct {
  width: 60%;
}

.u-w50pct {
  width: 50%;
}

.u-w40pct {
  width: 40%;
}

.u-w30pct {
  width: 30%;
}

.u-w20pct {
  width: 20%;
}

.u-w10pct {
  width: 10%;
}

.u-w75pct {
  width: 75%;
}

.u-w65pct {
  width: 65%;
}

.u-w25pct {
  width: 25%;
}

.u-w15pct {
  width: 15%;
}

.u-w66pct {
  width: math.div(2, 3) * 100%;
}

.u-w33pct {
  width: math.div(1, 3) * 100%;
}

//
// Small text utility
//
/* stylelint-disable selector-class-pattern */
@mixin u-small-text($context: $base-font-size-px) {
  /* stylelint-enable */
  font-size: math.div(14px, $context) + em;
}

small,
.u-small-text {
  @include u-small-text;

  &--subtle {
    color: var(--gray);
  }
}