@use "./variable" as *;

// width, height

@mixin width-height() {

  @for $index from 0 through 64 {
    .w-#{$index} {
      width: 1px * $index !important;
    }
    .h-#{$index} {
      height: 1px * $index !important;
    }
  }

  @for $index from 9 through 138 {
    $value: $index * 8;
    .w-#{$value} {
      width: 1px * $value !important;
    }
    .h-#{$value} {
      height: 1px * $value !important;
    }
  }

  .h-full {
    height: 100% !important;
  }

  .w-full {
    width: 100% !important;
  }
}

@include width-height();

// margin, padding

@mixin spacings-positive($prefix, $style-names...) {
  @for $index from 0 through 48 {
    .#{$prefix}-#{$index} {
      @each $style-name in $style-names {
        #{$style-name}: 1px * $index !important;
      }
    }
  }
  @for $index from 7 through 25 {
    $value: $index * 8;
    .#{$prefix}-#{$value} {
      @each $style-name in $style-names {
        #{$style-name}: 1px * $value !important;
      }
    }
  }
}

@mixin spacings-negative($prefix, $style-names...) {
  @for $step from 1 through 48 {
    .#{$prefix}-n#{$step} {
      @each $style-name in $style-names {
        #{$style-name}: -1px * $step !important;
      }
    }
  }
}

@mixin spacings-auto($prefix, $style-names...) {
  .#{$prefix}-auto {
    @each $style-name in $style-names {
      #{$style-name}: auto !important;
    }
  }
}

@include spacings-positive("mt", "margin-top");
@include spacings-positive("mb", "margin-bottom");
@include spacings-positive("ml", "margin-left");
@include spacings-positive("mr", "margin-right");
@include spacings-positive("mx", "margin-left", "margin-right");
@include spacings-positive("my", "margin-top", "margin-bottom");
@include spacings-positive("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");

@include spacings-negative("mt", "margin-top");
@include spacings-negative("mb", "margin-bottom");
@include spacings-negative("ml", "margin-left");
@include spacings-negative("mr", "margin-right");
@include spacings-negative("mx", "margin-left", "margin-right");
@include spacings-negative("my", "margin-top", "margin-bottom");
@include spacings-negative("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");

@include spacings-positive("pt", "padding-top");
@include spacings-positive("pb", "padding-bottom");
@include spacings-positive("pl", "padding-left");
@include spacings-positive("pr", "padding-right");
@include spacings-positive("px", "padding-left", "padding-right");
@include spacings-positive("py", "padding-top", "padding-bottom");
@include spacings-positive("pa", "padding-left", "padding-top", "padding-right", "padding-bottom");

@include spacings-negative("pt", "padding-top");
@include spacings-negative("pb", "padding-bottom");
@include spacings-negative("pl", "padding-left");
@include spacings-negative("pr", "padding-right");
@include spacings-negative("px", "padding-left", "padding-right");
@include spacings-negative("py", "padding-top", "padding-bottom");
@include spacings-negative("pa", "padding-left", "padding-top", "padding-right", "padding-bottom");

@include spacings-auto("mt", "margin-top");
@include spacings-auto("mb", "margin-bottom");
@include spacings-auto("ml", "margin-left");
@include spacings-auto("mr", "margin-right");
@include spacings-auto("mx", "margin-left", "margin-right");
@include spacings-auto("my", "margin-top", "margin-bottom");
@include spacings-auto("ma", "margin-left", "margin-top", "margin-right", "margin-bottom");

// max width, height
@for $index from 1 through 7 {
  $value: $index * 4;
  .max-w-#{$value} {
    max-width: #{$value}px !important;
  }
  .max-h-#{$value} {
    max-height: #{$value}px !important;
  }
}

@for $index from 2 through 80 {
  $value: $index * 16;
  .max-w-#{$value} {
    max-width: #{$value}px !important;
  }
  .max-h-#{$value} {
    max-height: #{$value}px !important;
  }
}

// min width, height
@for $index from 1 through 7 {
  $value: $index * 4;
  .min-w-#{$value} {
    min-width: #{$value}px !important;
  }
  .min-h-#{$value} {
    min-height: #{$value}px !important;
  }
}

@for $index from 2 through 80 {
  $value: $index * 16;
  .min-w-#{$value} {
    min-width: #{$value}px !important;
  }
  .min-h-#{$value} {
    min-height: #{$value}px !important;
  }
}

.min-w-0 {
  min-width: 0 !important;
}

.min-h-0 {
  min-height: 0 !important;
}

// display

@mixin display() {
  $display-styles: none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex;
  @each $display-style in $display-styles {
    .d-#{$display-style} {
      display: $display-style !important;
    }
  }
}

@include display();

// overflow

@mixin overflow() {
  $overflows: auto, hidden, visible !default;
  @each $value in $overflows {
    .overflow-#{$value} {
      overflow: $value !important;
    }
    .overflow-y-#{$value} {
      overflow-y: $value !important;
    }
    .overflow-x-#{$value} {
      overflow-x: $value !important;
    }
  }
}

@include overflow();

// visibility

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

// position

@mixin position() {
  $positions: static, relative, absolute, fixed, sticky !default;
  @each $position in $positions {
    .position-#{$position} {
      position: $position !important;
    }
  }
}

@include position();

// top|right|bottom|left|inset

@mixin position-element($from, $to, $step) {
  @for $index from $from through $to {
    $value: $index * $step;

    .top-#{$value} {
      top: 1px * $value !important;
    }
    .right-#{$value} {
      right: 1px * $value !important;
    }
    .bottom-#{$value} {
      bottom: 1px * $value !important;
    }
    .left-#{$value} {
      left: 1px * $value !important;
    }
    .inset-#{$value} {
      inset: 1px * $value !important;
    }
    .inset-x-#{$value} {
      right: 1px * $value !important;
      left: 1px * $value !important;
    }
    .inset-y-#{$value} {
      top: 1px * $value !important;
      bottom: 1px * $value !important;
    }
  }
}

@include position-element(0, 32, 1);

@mixin position-element-negative($from, $to, $step) {
  @for $index from $from through $to {
    $value: $index * $step;

    .top-n#{$value} {
      top: -1px * $value !important;
    }
    .right-n#{$value} {
      right: -1px * $value !important;
    }
    .bottom-n#{$value} {
      bottom: -1px * $value !important;
    }
    .left-n#{$value} {
      left: -1px * $value !important;
    }
    .inset-n#{$value} {
      inset: -1px * $value !important;
    }
    .inset-x-n#{$value} {
      right: -1px * $value !important;
      left: -1px * $value !important;
    }
    .inset-y-n#{$value} {
      top: -1px * $value !important;
      bottom: -1px * $value !important;
    }
  }
}

@include position-element-negative(0, 32, 1);

// z-index

@mixin z-index() {
  @for $index from 0 through 10 {
    .z-index-#{$index} {
      z-index: $index !important;
    }
  }
  @for $index from 2 through 10 {
    $value: $index * 10;
    .z-index-#{$value} {
      z-index: $value !important;
    }
  }
}

@include z-index();

// shadow

.shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2) !important;
}

// opacity

.opacity-0 {
  opacity: 0 !important;
}

.opacity-10 {
  opacity: .1 !important;
}

.opacity-50 {
  opacity: .5 !important;
}

.opacity-70 {
  opacity: .7 !important;
}

.opacity-100 {
  opacity: 1 !important;
}


// flex
@mixin flex-style() {

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

  .flex-wrap {
    flex-wrap: wrap !important;
  }
  .flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-fill {
    flex: 1 1 auto !important;
  }

  @for $index from 1 through 12 {
    $percent: 8.3333333333% * $index; // 100% / 12
    .flex-basis-#{$index} {
      flex: 0 0 $percent !important;
    }
  }

  .flex-basis-full {
    flex-basis: 100% !important;
  }
  .flex-basis-0 {
    flex-basis: 0 !important;
  }
  .flex-basis-auto {
    flex-basis: auto !important;
  }


  .justify-content-start {
    justify-content: flex-start !important;
  }
  .justify-content-end {
    justify-content: flex-end !important;
  }
  .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-start {
    align-items: flex-start !important;
  }
  .align-items-end {
    align-items: flex-end !important;
  }
  .align-items-center {
    align-items: center !important;
  }
  .align-items-baseline {
    align-items: baseline !important;
  }
  .align-items-stretch {
    align-items: stretch !important;
  }

  .align-content-start {
    align-content: flex-start !important;
  }
  .align-content-end {
    align-content: flex-end !important;
  }
  .align-content-center {
    align-content: center !important;
  }
  .align-content-between {
    align-content: space-between !important;
  }
  .align-content-around {
    align-content: space-around !important;
  }
  .align-content-stretch {
    align-content: stretch !important;
  }

  .align-self-auto {
    align-self: auto !important;
  }
  .align-self-start {
    align-self: flex-start !important;
  }
  .align-self-end {
    align-self: flex-end !important;
  }
  .align-self-center {
    align-self: center !important;
  }
  .align-self-baseline {
    align-self: baseline !important;
  }
  .align-self-stretch {
    align-self: stretch !important;
  }
}

@include flex-style();

@mixin gap() {
  @for $index from 0 through 32 {
    .gap-#{$index} {
      gap: 1px * $index !important;
    }
    .gap-x-#{$index} {
      column-gap: 1px * $index !important;
    }
    .gap-y-#{$index} {
      row-gap: 1px * $index !important;
    }
  }
}

@include gap();

@mixin order-style() {
  @for $index from 0 to 13 {
    .order-#{$index} {
      order: $index !important;
    }
  }

  .order-first {
    order: 0 !important;
  }

  .order-last {
    order: 13 !important;
  }
}

@include order-style();

//float
@mixin float-style() {
  .float-left {
    float: left !important;
  }
  .float-right {
    float: right !important;
  }
  .float-none {
    float: none !important;
  }
}

@include float-style();

//clearfix
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

.clearfix {
  @include clearfix();
}


// border

.border {
  border: 1px solid var(--border-light) !important;
}

.border-top {
  border-top: 1px solid var(--border-light) !important;
}

.border-right {
  border-right: 1px solid var(--border-light) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border-light) !important;
}

.border-left {
  border-left: 1px solid var(--border-light) !important;
}

.border-0 {
  border: none !important;
}

.border-top-0 {
  border-top: none !important;
}

.border-right-0 {
  border-right: none !important;
}

.border-bottom-0 {
  border-bottom: none !important;
}

.border-left-0 {
  border-left: none !important;
}

@for $index from 0 through 11 {
  .border-w-#{$index} {
    border-width: 1px * $index !important;
  }
}

// Border-radius

.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-top {
  border-top-left-radius: var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
}

.rounded-right {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}

.rounded-bottom {
  border-bottom-right-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.rounded-left {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.rounded-sm {
  border-radius: var(--border-radius-sm) !important;
}

.rounded-lg {
  border-radius: var(--border-radius-lg) !important;
}

@for $index from 0 through 31 {
  .rounded-#{$index} {
    border-radius: 1px * $index !important;
  }

  .rounded-top-#{$index} {
    border-top-left-radius: 1px * $index !important;
    border-top-right-radius: 1px * $index !important;
  }

  .rounded-right-#{$index} {
    border-top-right-radius: 1px * $index !important;
    border-bottom-right-radius: 1px * $index !important;
  }

  .rounded-bottom-#{$index} {
    border-bottom-right-radius: 1px * $index !important;
    border-bottom-left-radius: 1px * $index !important;
  }

  .rounded-left-#{$index} {
    border-top-left-radius: 1px * $index !important;
    border-bottom-left-radius: 1px * $index !important;
  }

  .rounded-top-left-#{$index} {
    border-top-left-radius: 1px * $index !important;
  }

  .rounded-top-right-#{$index} {
    border-top-right-radius: 1px * $index !important;
  }

  .rounded-bottom-left-#{$index} {
    border-bottom-left-radius: 1px * $index !important;
  }

  .rounded-bottom-right-#{$index} {
    border-bottom-right-radius: 1px * $index !important;
  }
}

.rounded-circle {
  border-radius: var(--rounded-circle) !important;
}

.rounded-pill {
  border-radius: var(--rounded-pill) !important;
}


// text attributes

@mixin text-style() {
  $text-aligns: left, right, center, justify;
  @each $text-align in $text-aligns {
    .text-#{$text-align} {
      text-align: $text-align !important;
    }
  }

  $text-spaces: normal, nowrap, pre-wrap;
  @each $text-space in $text-spaces {
    .text-#{$text-space} {
      white-space: $text-space !important;
    }
  }

  $text-decorations: none, underline;
  @each $text-decoration in $text-decorations {
    .text-decoration-#{$text-decoration} {
      text-decoration: $text-decoration !important;
    }
  }
}

@include text-style();

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-ellipsis {
  text-overflow: ellipsis !important;
}

.text-clip {
  text-overflow: clip !important;
}

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-line-clamp {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
}


// vertical-align
$vertical-aligns: baseline, top, middle, bottom, text-bottom, text-top;
@each $vertical-align in $vertical-aligns {
  .align-#{$vertical-align} {
    vertical-align: $vertical-align !important;
  }
}

// code chips

.code-chip-base {
  padding: 0 8px;
  border: 1px solid #BCC6D3;
  border-radius: 100px;
  background-color: white;
  white-space: nowrap;

  //&::before {
  //  @extend .font-icon;
  //  content: 'stroke_full';
  //  font-size: 0.6em;
  //  margin: 0 4px 0 -4px;
  //  vertical-align: middle;
  //}
}

.code-chip-red {
  @extend .code-chip-base;
  color: var(--red);
  border-color: var(--red);
  background-color: var(--red-bg);
}

.code-chip-black {
  @extend .code-chip-base;
  color: var(--body-text);
  border-color: var(--body-text);
  background-color: var(--body-bg);
}

.code-chip-gray {
  @extend .code-chip-base;
  color: var(--gray);
  border-color: var(--gray-500);
  background-color: var(--gray-bg);
}

.code-chip-blue {
  @extend .code-chip-base;
  color: var(--blue);
  border-color: var(--blue);
  background-color: var(--blue-bg);
}

.code-chip-green {
  @extend .code-chip-base;
  color: var(--green);
  border-color: var(--green);
  background-color: var(--green-bg);
}

.code-chip-purple {
  @extend .code-chip-base;
  color: var(--purple);
  border-color: var(--purple);
  background-color: var(--purple-bg);
}

.code-chip-orange {
  @extend .code-chip-base;
  color: var(--orange);
  border-color: var(--orange);
  background-color: var(--orange-bg);
}

.bg-transparent {
  background-color: transparent !important;
}

// background-color, text-color, border-color
@mixin color() {
  .bg-transparent {
    background-color: transparent !important;
  }

  @each $name, $color in $colors {
    .bg-#{$name} {
      background-color: #{$color} !important;
    }

    .text-#{$name} {
      color: #{$color} !important;
    }

    .border-#{$name} {
      border-color: #{$color} !important;
    }
  }
}

@include color();

// Cursor
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.focus-outline-none:focus {
  outline: none !important;
}