mini-strap/packages/core/src/_utils.scss

@use "./tokens" as *;
@use "./mixins";
@use "sass:math";

.msp-position-fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

.msp-position-sticky {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;
}

.msp-d-none {
  display: none;
}

.msp-d-block {
  display: block;
}

.msp-d-flex {
  display: flex;
}

.msp-visually-hidden {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}

@include mixins.responsive using($breakpoint, $size) {
  .msp-d-#{$breakpoint}-none {
    display: none;
  }
  .msp-d-#{$breakpoint}-block {
    display: block;
  }

  .msp-d-#{$breakpoint}-flex {
    display: flex;
  }
}

.msp-flex-eq > * {
  flex: 100%;
}

.msp-flex-column {
  flex-direction: column !important;
}
.msp-flex-row {
  flex-direction: row !important;
}

@include mixins.responsive using($breakpoint, $size) {
  .msp-flex-#{$breakpoint}-column {
    flex-direction: column !important;
  }
  .msp-flex-#{$breakpoint}-row {
    flex-direction: row !important;
  }
}

.msp-hstack {
  --msp-gap: var(--msp-spacing-3);
  display: flex;
  gap: var(--msp-gap);
  align-items: center;
}

.msp-hstack-reverse {
  --msp-gap: var(--msp-spacing-3);
  display: flex;
  gap: var(--msp-gap);
  align-items: center;
  flex-direction: row-reverse;
}

.msp-vstack {
  --msp-gap: var(--msp-spacing-3);
  display: flex;
  gap: var(--msp-gap);
  flex-direction: column;
}

.msp-vstack-reverse {
  --msp-gap: var(--msp-spacing-3);
  display: flex;
  flex-direction: column-reverse;
}

.msp-flex-grow {
  flex-grow: 1;
}

.msp-flex-wrap {
  flex-wrap: wrap;
}
.msp-flex-nowrap {
  flex-wrap: nowrap;
}

@include mixins.responsive using($breakpoint, $size) {
  .msp-flex-#{$breakpoint}-wrap {
    flex-wrap: wrap;
  }

  .msp-flex-#{$breakpoint}-nowrap {
    flex-wrap: nowrap;
  }
}

.msp-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.msp-justify-content-start {
  justify-content: start !important;
}

.msp-justify-content-center {
  justify-content: center !important;
}

.msp-justify-content-end {
  justify-content: end !important;
}

.msp-justify-content-between {
  justify-content: space-between !important;
}

.msp-justify-content-around {
  justify-content: space-around !important;
}

.msp-align-items-center {
  align-items: center !important;
}

.msp-grid {
  --msp-gap: var(--msp-spacing-3);
  --msp-columns: repeat(3, 1fr);
  --msp-min-col-width: 150px;
  display: grid;
  grid-template-columns: var(--msp-columns);
  gap: var(--msp-gap);
}

@mixin grid-cols($amount) {
  --msp-columns: repeat(#{$amount}, minmax(var(--msp-min-col-width), 1fr));
}

@for $i from 1 through 12 {
  .msp-grid-cols-#{$i} {
    @include grid-cols($i);
  }
}

@include mixins.responsive-steps(1, 12) using ($breakpoint, $index) {
  .msp-grid-#{$breakpoint}-cols-#{$index} {
    @include grid-cols($index);
  }
}

.msp-list-unstyle {
  list-style: none;
}

.msp-text-justify {
  text-align: justify;
  text-justify: inter-word;
}

.msp-text-start {
  text-align: start;
}

.msp-text-center {
  text-align: center;
}

.msp-text-end {
  text-align: end;
}

.msp-align-start {
  vertical-align: start;
}

.msp-align-center {
  vertical-align: middle;
}

.msp-align-end {
  vertical-align: end;
}

.msp-overflow-scroll {
  overflow: scroll;
}
.msp-overflow-x-scroll {
  overflow-x: scroll;
}
.msp-overflow-y-scroll {
  overflow-y: scroll;
}

.msp-w-auto {
  width: auto;
}
.msp-h-auto {
  height: auto;
}
@for $i from 0 through 100 {
  .msp-w-#{$i} {
    width: math.percentage(calc($i / 100));
  }
  .msp-h-#{$i} {
    height: math.percentage(calc($i / 100));
  }
}

@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
  .msp-w-#{$breakpoint}-#{$index} {
    width: math.percentage(calc($index / 100));
  }

  .msp-h-#{$breakpoint}-#{$index} {
    height: math.percentage(calc($index / 100));
  }
}

@mixin spacing-utils($name, $value, $breakpoint: false) {
  @if $breakpoint {
    $name: "#{$breakpoint}-#{$name}";
  }

  .msp-m-#{$name} {
    margin: $value !important;
  }
  .msp-mx-#{$name} {
    margin-left: $value !important;
    margin-right: $value !important;
  }
  .msp-my-#{$name} {
    margin-top: $value !important;
    margin-bottom: $value !important;
  }
  .msp-mt-#{$name} {
    margin-top: $value !important;
  }
  .msp-mb-#{$name} {
    margin-bottom: $value !important;
  }
  .msp-ml-#{$name} {
    margin-left: $value !important;
  }
  .msp-mr-#{$name} {
    margin-right: $value !important;
  }
  .msp-p-#{$name} {
    padding: $value !important;
  }
  .msp-px-#{$name} {
    padding-left: $value !important;
    padding-right: $value !important;
  }
  .msp-py-#{$name} {
    padding-top: $value !important;
    padding-bottom: $value !important;
  }
  .msp-pt-#{$name} {
    padding-top: $value !important;
  }
  .msp-pb-#{$name} {
    padding-bottom: $value !important;
  }
  .msp-pl-#{$name} {
    padding-left: $value !important;
  }
  .msp-pr-#{$name} {
    padding-right: $value !important;
  }

  .msp-gap-#{$name} {
    --msp-gap: #{$value};
  }
}

@include spacing-utils(auto, auto);
@include mixins.responsive using($breakpoint, $size) {
  @include spacing-utils(auto, auto);
}

@each $index, $variable, $value in $spacings {
  @include spacing-utils($index, var(#{$variable}));
  @include mixins.responsive using($breakpoint, $size) {
    @include spacing-utils($index, var(#{$variable}), $breakpoint);
  }
}

.msp-shadow-0 {
  box-shadow: none;
}

.msp-shadow-1 {
  box-shadow: 10px 10px 5px 0px var(--msp-shadow);
}

.msp-border-radius {
  border-radius: var(--msp-border-radius);
}

@each $index, $variable, $value in $spacings {
  .msp-border-#{$index} {
    border: #{$index}px var(--msp-border-style) var(--msp-border-color);
  }
}

.msp-text-none {
  text-transform: none;
}
.msp-text-capitalize {
  text-transform: capitalize;
}
.msp-text-uppercase {
  text-transform: uppercase;
}
.msp-text-uppercase {
  text-transform: uppercase;
}
.msp-text-lowercase {
  text-transform: lowercase;
}