/* Inspired by Tachyons implementation: https://tachyons.io/docs/layout/widths/ */
// stylelint-disable declaration-no-important
@use '../settings/variables' as v;

$-width-values: (
  10: 10%,
  20: 20%,
  25: 25%,
  30: 30%,
  33: 33%,
  34: 34%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  75: 75%,
  80: 80%,
  90: 90%,
  100: 100%,
  third: calc(100% / 3),
  half: 50%,
  two-thirds: calc(100% / 1.5),
  full: 100%,
  auto: auto,
);

@each $name in map-keys($-width-values) {
  $value: map-get($-width-values, $name);

  .qpp-u-width--#{$name} {
    width: #{$value} !important;
  }
}

@each $breakpoint in map-keys(v.$breakpoints) {
  $viewport: map-get(v.$breakpoints, $breakpoint);

  @media (min-width: $viewport) {
    @each $name in map-keys($-width-values) {
      $value: map-get($-width-values, $name);

      .qpp-u-#{$breakpoint}-width--#{$name} {
        width: #{$value} !important;
      }
    }
  }
}

$-px-width-vals: (
  10: 10px,
  12: 12px,
  15: 15px,
  16: 16px,
  20: 20px,
  24: 24px,
  30: 30px,
  32: 32px,
  40: 40px,
  50: 50px,
);

@each $name in map-keys($-px-width-vals) {
  $value: map-get($-px-width-vals, $name);

  .qpp-u-width--#{$name}px {
    width: #{$value} !important;
  }
}

@each $breakpoint in map-keys(v.$breakpoints) {
  $viewport: map-get(v.$breakpoints, $breakpoint);

  @media (min-width: $viewport) {
    @each $name in map-keys($-px-width-vals) {
      $value: map-get($-px-width-vals, $name);

      .qpp-u-#{$breakpoint}-width--#{$name}px {
        width: #{$value} !important;
      }
    }
  }
}