vuesion/vuesion

@import 'design-system/mixins/default';
// Display
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}

// Helpers
.wrap {
  flex-wrap: wrap;
}
.no-wrap {
  flex-wrap: nowrap;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}

// flex direction
@include mediaMinMax(phone) {
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
}
@include mediaMinMax(tabletPortrait) {
  .flex-row-tp {
    flex-direction: row;
  }
  .flex-row-reverse-tp {
    flex-direction: row-reverse;
  }
  .flex-col-tp {
    flex-direction: column;
  }
  .flex-col-reverse-tp {
    flex-direction: column-reverse;
  }
}
@include mediaMinMax(tabletLandscape) {
  .flex-row-tl {
    flex-direction: row;
  }
  .flex-row-reverse-tl {
    flex-direction: row-reverse;
  }
  .flex-col-tl {
    flex-direction: column;
  }
  .flex-col-reverse-tl {
    flex-direction: column-reverse;
  }
}
@include mediaMinMax(smallDesktop) {
  .flex-row-sd {
    flex-direction: row;
  }
  .flex-row-reverse-sd {
    flex-direction: row-reverse;
  }
  .flex-col-sd {
    flex-direction: column;
  }
  .flex-col-reverse-sd {
    flex-direction: column-reverse;
  }
}
@include mediaMin(largeDesktop) {
  .flex-row-ld {
    flex-direction: row;
  }
  .flex-row-reverse-ld {
    flex-direction: row-reverse;
  }
  .flex-col-ld {
    flex-direction: column;
  }
  .flex-col-reverse-ld {
    flex-direction: column-reverse;
  }
}

// Width

.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vh;
}
.w-min {
  width: min-content;
}
.w-max {
  width: max-content;
}
.w-fit {
  width: fit-content;
}
@for $i from 1 through 10 {
  .w-#{$i}\/#{10} {
    width: #{calc(100 * $i / 10) + '%'};
  }
}
@for $i from 1 through 12 {
  .w-#{$i}\/#{12} {
    width: #{calc(100 * $i / 12) + '%'};
  }
}

@include mediaMin(tabletPortrait) {
  .w-tp-auto {
    width: auto;
  }
  .w-tp-full {
    width: 100%;
  }
  .w-tp-screen {
    width: 100vh;
  }
  .w-tp-min {
    width: min-content;
  }
  .w-tp-max {
    width: max-content;
  }
  .w-tp-fit {
    width: fit-content;
  }
  @for $i from 1 through 10 {
    .w-tp-#{$i}\/#{10} {
      width: #{calc(100 * $i / 10) + '%'};
    }
  }
  @for $i from 1 through 12 {
    .w-tp-#{$i}\/#{12} {
      width: #{calc(100 * $i / 12) + '%'};
    }
  }
}
@include mediaMin(tabletLandscape) {
  .w-tl-auto {
    width: auto;
  }
  .w-tl-full {
    width: 100%;
  }
  .w-tl-screen {
    width: 100vh;
  }
  .w-tl-min {
    width: min-content;
  }
  .w-tl-max {
    width: max-content;
  }
  .w-tl-fit {
    width: fit-content;
  }
  @for $i from 1 through 10 {
    .w-tl-#{$i}\/#{10} {
      width: #{calc(100 * $i / 10) + '%'};
    }
  }
  @for $i from 1 through 12 {
    .w-tl-#{$i}\/#{12} {
      width: #{calc(100 * $i / 12) + '%'};
    }
  }
}
@include mediaMin(smallDesktop) {
  .w-sd-auto {
    width: auto;
  }
  .w-sd-full {
    width: 100%;
  }
  .w-sd-screen {
    width: 100vh;
  }
  .w-sd-min {
    width: min-content;
  }
  .w-sd-max {
    width: max-content;
  }
  .w-sd-fit {
    width: fit-content;
  }
  @for $i from 1 through 10 {
    .w-sd-#{$i}\/#{10} {
      width: #{calc(100 * $i / 10) + '%'};
    }
  }
  @for $i from 1 through 12 {
    .w-sd-#{$i}\/#{12} {
      width: #{calc(100 * $i / 12) + '%'};
    }
  }
}
@include mediaMin(largeDesktop) {
  .w-ld-auto {
    width: auto;
  }
  .w-ld-full {
    width: 100%;
  }
  .w-ld-screen {
    width: 100vh;
  }
  .w-ld-min {
    width: min-content;
  }
  .w-ld-max {
    width: max-content;
  }
  .w-ld-fit {
    width: fit-content;
  }
  @for $i from 1 through 10 {
    .w-ld-#{$i}\/#{10} {
      width: #{calc(100 * $i / 10) + '%'};
    }
  }
  @for $i from 1 through 12 {
    .w-ld-#{$i}\/#{12} {
      width: #{calc(100 * $i / 12) + '%'};
    }
  }
}

// grid columns
.grid-cols-none {
  width: fit-content;
}
@for $i from 1 through 12 {
  .grid-cols-#{$i} {
    grid-template-columns: repeat(#{$i}, minmax(min-content, 1fr));
  }
}

@include mediaMin(tabletPortrait) {
  .grid-cols-tp-none {
    width: fit-content;
  }
  @for $i from 1 through 12 {
    .grid-cols-tp-#{$i} {
      grid-template-columns: repeat(#{$i}, minmax(min-content, 1fr));
    }
  }
}
@include mediaMin(tabletLandscape) {
  .grid-cols-tl-none {
    width: fit-content;
  }
  @for $i from 1 through 12 {
    .grid-cols-tl-#{$i} {
      grid-template-columns: repeat(#{$i}, minmax(min-content, 1fr));
    }
  }
}
@include mediaMin(smallDesktop) {
  .grid-cols-sd-none {
    width: fit-content;
  }
  @for $i from 1 through 12 {
    .grid-cols-sd-#{$i} {
      grid-template-columns: repeat(#{$i}, minmax(min-content, 1fr));
    }
  }
}
@include mediaMin(largeDesktop) {
  .grid-cols-ld-none {
    width: fit-content;
  }
  @for $i from 1 through 12 {
    .grid-cols-ld-#{$i} {
      grid-template-columns: repeat(#{$i}, minmax(min-content, 1fr));
    }
  }
}