@use "sass:math";
@use "../tools" as *;

////
/// Grid widths
///
/// Force grid widths on all screen sizes
///
/// By default all grid elements will go to 100% width
/// on screen sizes below tablet, these utilities can force
/// custom widths on all screen sizes
///
/// @group utilities
///
/// @example html
///   <div class="nhsuk-u-one-half"></div>
////

// Utility classes are allowed to use !important;
// so we disable stylelint for that rule
// stylelint-disable declaration-no-important

.nhsuk-u-one-half {
  width: math.percentage(math.div(1, 2)) !important;
  float: left;
}

.nhsuk-u-one-third {
  width: math.percentage(math.div(1, 3)) !important;
  float: left;
}

.nhsuk-u-two-thirds {
  width: math.percentage(math.div(2, 3)) !important;
  float: left;
}

.nhsuk-u-one-quarter {
  width: math.percentage(math.div(1, 4)) !important;
  float: left;
}

.nhsuk-u-three-quarters {
  width: math.percentage(math.div(3, 4)) !important;
  float: left;
}

// Force grid widths on screen sizes on tablet
// and above
//
// By default all grid elements will go to 100% width
// on every screen size, these utilities can force
// custom widths on screen sizes on tablet
// and above

.nhsuk-u-one-half-tablet {
  width: 100% !important;
  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 2)) !important;
    float: left;
  }
}

.nhsuk-u-one-third-tablet {
  width: 100% !important;
  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 3)) !important;
    float: left;
  }
}

.nhsuk-u-two-thirds-tablet {
  width: 100% !important;
  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(2, 3)) !important;
    float: left;
  }
}

.nhsuk-u-one-quarter-tablet {
  width: 100% !important;
  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 4)) !important;
    float: left;
  }
}

.nhsuk-u-three-quarters-tablet {
  width: 100% !important;
  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(3, 4)) !important;
    float: left;
  }
}