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

////
/// Widths
///
/// Force element widths on all screen sizes
///
/// @group utilities
/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
///
/// @example html
///   <input class="nhsuk-input nhsuk-u-width-full" id="example" name="example" type="text">
////

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

.nhsuk-u-width-full {
  width: 100% !important;
}

.nhsuk-u-width-three-quarters {
  width: 100% !important;

  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(3, 4)) !important;
  }
}

.nhsuk-u-width-two-thirds {
  width: 100% !important;

  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(2, 3)) !important;
  }
}

.nhsuk-u-width-one-half {
  width: 100% !important;

  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 2)) !important;
  }
}

.nhsuk-u-width-one-third {
  width: 100% !important;

  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 3)) !important;
  }
}

.nhsuk-u-width-one-quarter {
  width: 100% !important;

  @include nhsuk-media-query($from: tablet) {
    width: math.percentage(math.div(1, 4)) !important;
  }
}