@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/mixins-utilities' 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;
  }
}

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

//
// Visually hidden
//
.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;
}

.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;
}

.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);
  }
}

//
// 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
//
small,
.u-small-text {
  @include u-small-text;

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