personal-page/_src/assets/style/_utils.scss

@use './variables' as *;
@use './mixins';

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

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

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

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

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

  .d-#{$screen-size}-flex {
    display: flex;
  }
}

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

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

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

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

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

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

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

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

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

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

  .flex-#{$size-name}-nowrap {
    flex-wrap: nowrap;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-#{$size-name}-#{$index} {
    height: percentage(calc($index / 100));
  }
}

@mixin spacing-utils($name, $value, $screen-size: false) {
  @if $screen-size {
    $name: '#{$screen-size}-#{$name}';
  }

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

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

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

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

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

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

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

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