@use "../lib/mixin";
@use "../settings";

/*
Box sizing

The box sizing module.

Weight: -99

Style guide: #{settings.$util-prefix}.box-sizing
*/

/*
Modifiers

The box sizing modifiers.
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--box-sizing-border-box`.

Weight: -100

Markup: <div class="box-sizing-example {{modifier_class}}"></div>
<style>
  :where(.box-sizing-example) {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 25px;
    background: #999;
    border: 25px solid #ccc;
  }
</style>

#{settings.$util-prefix}--box-sizing-border-box - Set border box
#{settings.$util-prefix}--box-sizing-content-box - Set content box

Style guide: #{settings.$util-prefix}.box-sizing.builtin
*/
.#{settings.$util-prefix}--box-sizing {
  @each $value in ("border-box", "content-box") {
    &-#{$value} {
      @include mixin.by-breakpoints() {
        --box-sizing: #{$value};

        box-sizing: var(--box-sizing);
      }
    }
  }
}