@use '../common/mixins';
@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// responsive
// spacing and size
// position
// display
// border
// border-radius
// aspect-ratio
// z-index
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// responsive
// —————————————————————————————————————————————————————————————————

.hide {
	
	&-desktop { @include mixins.responsive(down, desktop) { display: none !important; } }
	&-laptop { @include mixins.responsive(down, laptop) { display: none !important; } }
	&-tablet { @include mixins.responsive(down, tablet) { display: none !important; } }
	&-mobile { @include mixins.responsive(down, mobile) { display: none !important; } }
	&-mobileSm { @include mixins.responsive(down, mobile-sm) { display: none !important; } }
	&-touch { @include mixins.responsive-touch { display: none !important; } }
}

.show {

  &-desktop { @include mixins.responsive(up, desktop) { display: none !important; } }
	&-laptop { @include mixins.responsive(up, laptop) { display: none !important; } }
	&-tablet { @include mixins.responsive(up, tablet) { display: none !important; } }
	&-mobile { @include mixins.responsive(up, mobile) { display: none !important; } }
	&-mobileSm { @include mixins.responsive(up, mobile-sm) { display: none !important; } }
  &-touch { @include mixins.responsive-click { display: none !important; } }
}

// —————————————————————————————————————————————————————————————————
// spacing and size
// —————————————————————————————————————————————————————————————————

.w-viewport { width: 100vw !important; }
.w-full { width: 100% !important; }
.w-fit { width: fit-content !important; }

.h-viewport { height: 100vh !important; }
.h-full { height: 100% !important; }
.h-fit { height: fit-content !important; }

.maxw-desktop-lg { max-width: variables.$desktop-lg; }
.maxw-desktop { max-width: variables.$desktop; }
.maxw-tablet { max-width: variables.$tablet; }
.maxw-laptop { max-width: variables.$laptop; }
.maxw-mobile { max-width: variables.$mobile; }
.maxw-mobile-sm { max-width: variables.$mobile-sm; }

.m-auto { margin: auto !important; }
.mv-auto { margin-block: auto !important }
.mt-auto { margin-block-start: auto !important; }
.mb-auto { margin-block-end: auto !important; }
.mh-auto { margin-inline: auto !important }
.mr-auto { margin-inline-end: auto !important; }
.ml-auto { margin-inline-start: auto !important; }

// from .25rem to 5rem, every quarter

$fractions: ( "1-4": 0.25, "1-2": 0.5, "3-4": 0.75 );

@for $i from 0 through 5 {
  .w-#{$i} { width: #{$i}rem !important; }
  .h-#{$i} { height: #{$i}rem !important; }

  .m-#{$i} { margin: #{$i}rem !important; }
  .mv-#{$i} { margin-block: #{$i}rem !important; }
  .mt-#{$i} { margin-block-start: #{$i}rem !important; }
  .mb-#{$i} { margin-block-end: #{$i}rem !important; }
  .mh-#{$i} { margin-inline: #{$i}rem !important; }
  .ml-#{$i} { margin-inline-start: #{$i}rem !important; }
  .mr-#{$i} { margin-inline-end: #{$i}rem !important; }

  .p-#{$i} { padding: #{$i}rem !important; }
  .pv-#{$i} { padding-block: #{$i}rem !important; }
  .pt-#{$i} { padding-block-start: #{$i}rem !important; }
  .pb-#{$i} { padding-block-end: #{$i}rem !important; }
  .ph-#{$i} { padding-inline: #{$i}rem !important; }
  .pl-#{$i} { padding-inline-start: #{$i}rem !important; }
  .pr-#{$i} { padding-inline-end: #{$i}rem !important; }

  @each $symbol, $value in $fractions {

    @if $i == 0 {
      .w-#{$symbol} { width: #{$i + $value}rem !important; }
      .h-#{$symbol} { height: #{$i + $value}rem !important; }
      
      .m-#{$symbol} { margin: #{$i + $value}rem !important; }
      .mv-#{$symbol} { margin-block: #{$i + $value}rem !important; }
      .mt-#{$symbol} { margin-block-start: #{$i + $value}rem !important; }
      .mb-#{$symbol} { margin-block-end: #{$i + $value}rem !important; }
      .mh-#{$symbol} { margin-inline: #{$i + $value}rem !important; }
      .ml-#{$symbol} { margin-inline-start: #{$i + $value}rem !important; }
      .mr-#{$symbol} { margin-inline-end: #{$i + $value}rem !important; }

      .p-#{$symbol} { padding: #{$i + $value}rem !important; }
      .pv-#{$symbol} { padding-block: #{$i + $value}rem !important; }
      .pt-#{$symbol} { padding-block-start: #{$i + $value}rem !important; }
      .pb-#{$symbol} { padding-block-end: #{$i + $value}rem !important; }
      .ph-#{$symbol} { padding-inline: #{$i + $value}rem !important; }
      .pl-#{$symbol} { padding-inline-start: #{$i + $value}rem !important; }
      .pr-#{$symbol} { padding-inline-end: #{$i + $value}rem !important; }

    } @else {
      .w-#{$i}#{$symbol} { width: #{$i + $value}rem !important; }
      .h-#{$i}#{$symbol} { height: #{$i + $value}rem !important; }
    
      .m-#{$i}#{$symbol} { margin: #{$i + $value}rem !important; }
      .mv-#{$i}#{$symbol} { margin-block: #{$i + $value}rem !important; }
      .mt-#{$i}#{$symbol} { margin-block-start: #{$i + $value}rem !important; }
      .mb-#{$i}#{$symbol} { margin-block-end: #{$i + $value}rem !important; }
      .mh-#{$i}#{$symbol} { margin-inline: #{$i + $value}rem !important; }
      .ml-#{$i}#{$symbol} { margin-inline-start: #{$i + $value}rem !important; }
      .mr-#{$i}#{$symbol} { margin-inline-end: #{$i + $value}rem !important; }
    
      .p-#{$i}#{$symbol} { padding: #{$i + $value}rem !important; }
      .pv-#{$i}#{$symbol} { padding-block: #{$i + $value}rem !important; }
      .pt-#{$i}#{$symbol} { padding-block-start: #{$i + $value}rem !important; }
      .pb-#{$i}#{$symbol} { padding-block-end: #{$i + $value}rem !important; }
      .ph-#{$i}#{$symbol} { padding-inline: #{$i + $value}rem !important; }
      .pl-#{$i}#{$symbol} { padding-inline-start: #{$i + $value}rem !important; }
      .pr-#{$i}#{$symbol} { padding-inline-end: #{$i + $value}rem !important; }
    }
  }
}

// from 6 to 20 rem, only integer

@for $i from 6 through 20 {
  .w-#{$i} { width: #{$i}rem !important; }
  .h-#{$i} { height: #{$i}rem !important; }

  .m-#{$i} { margin: #{$i}rem !important; }
  .mt-#{$i} { margin-block-start: #{$i}rem !important; }
  .mr-#{$i} { margin-inline-end: #{$i}rem !important; }
  .mb-#{$i} { margin-block-end: #{$i}rem !important; }
  .ml-#{$i} { margin-inline-start: #{$i}rem !important; }
  .mv-#{$i} { margin-block-start: #{$i}rem !important; margin-block-end: #{$i}rem !important; }
  .mh-#{$i} { margin-inline-end: #{$i}rem !important; margin-inline-start: #{$i}rem !important; }

  .p-#{$i} { padding: #{$i}rem !important; }
  .pt-#{$i} { margin-block-start: #{$i}rem !important; }
  .pr-#{$i} { margin-inline-end: #{$i}rem !important; }
  .pb-#{$i} { margin-block-end: #{$i}rem !important; }
  .pl-#{$i} { margin-inline-start: #{$i}rem !important; }
  .pv-#{$i} { margin-block-start: #{$i}rem !important; margin-block-end: #{$i}rem !important; }
  .ph-#{$i} { margin-inline-end: #{$i}rem !important; margin-inline-start: #{$i}rem !important; }
}

// —————————————————————————————————————————————————————————————————
// position
// —————————————————————————————————————————————————————————————————

.pos {

  &-absolute { position: absolute !important; }
  &-relative { position: relative !important; }
  &-fixed { position: fixed !important; }
  &-sticky { position: sticky !important; inset-block-start: 0; }
}

// —————————————————————————————————————————————————————————————————
// display
// —————————————————————————————————————————————————————————————————

// general display

.dis-flex { display: flex !important; }
.dis-inlineFlex { display: inline-flex !important; }
.dis-block { display: block !important; }
.dis-inlineBlock { display: inline-block !important; }

// screen reader only (visually hidden but accessible)
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

// flexbasis

.fb {

  &-content { flex-basis: content !important; }
  &-0 { flex-basis: 0 !important; }
  &-1 { flex-basis: 1 !important; }
}

// flex-grow

.fg {

  &-0 { flex-grow: 0 !important; }
  &-1 { flex-grow: 1 !important; }
}

// flex-shrink

.fs {

  &-0 { flex-shrink: 0 !important; }
  &-1 { flex-shrink: 1 !important; }
}

// —————————————————————————————————————————————————————————————————
// border
// —————————————————————————————————————————————————————————————————

.b-1 { border: variables.$border; }
.bt-1 { border-block-start: variables.$border; }
.bb-1 { border-block-end: variables.$border; }
.br-1 { border-inline-end: variables.$border; }
.bl-1 { border-inline-start: variables.$border; }

// —————————————————————————————————————————————————————————————————
// border-radius
// —————————————————————————————————————————————————————————————————

.br-sm { border-radius: variables.$border-radius-sm; }
.br-md { border-radius: variables.$border-radius-md; }
.br-lg { border-radius: variables.$border-radius-lg; }

// —————————————————————————————————————————————————————————————————
// aspect-ratio
// —————————————————————————————————————————————————————————————————

.ar-1-1 { aspect-ratio: 1/1; }
.ar-1-2 { aspect-ratio: 1/2; }
.ar-1-3 { aspect-ratio: 1/3; }
.ar-2-3 { aspect-ratio: 2/3; }
.ar-3-4 { aspect-ratio: 3/4; }
.ar-2-1 { aspect-ratio: 2/1; }
.ar-3-1 { aspect-ratio: 3/1; }
.ar-3-2 { aspect-ratio: 3/2; }
.ar-4-3 { aspect-ratio: 4/3; }

// —————————————————————————————————————————————————————————————————
// z-index
// —————————————————————————————————————————————————————————————————

@for $i from 0 through 10 {
  .index-#{$i} { z-index: #{$i}; }
}