@use "sass:map";
$medium: "(min-width: 769px) and (max-width: 1200px)";

$sizes: (
  none: 0,
  xxxsmall: 3px,
  xxsmall: 5px,
  xsmall: 10px,
  small: 15px,
  medium: 20px,
  large: 25px,
  xlarge: 30px,
  xxlarge: 35px,
);

$sides: top, right, bottom, left;

// Add `xxxsmall` variant to padding and margin
.margin {
  &-xxxsmall {
    margin: map.get($sizes, xxxsmall);
  }

  @each $side in $sides {
    &-#{$side}-xxxsmall {
      margin-#{$side}: map.get($sizes, xxxsmall);
    }

    &-#{$side}-none {
      margin-#{$side}: 0;
    }
  }
}

.padding {
  &-xxxsmall {
    padding: map.get($sizes, xxxsmall);
  }

  @each $side in $sides {
    &-#{$side}-xxxsmall {
      padding-#{$side}: map.get($sizes, xxxsmall);
    }

    &-#{$side}-none {
      padding-#{$side}: 0;
    }
  }
}

.margin {
  @each $size, $value in $sizes {
    &-x-#{$size} {
      margin-left: $value;
      margin-right: $value;
    }

    &-y-#{$size} {
      margin-top: $value;
      margin-bottom: $value;
    }
  }
}

.padding {
  @each $size, $value in $sizes {
    &-x-#{$size} {
      padding-left: $value;
      padding-right: $value;
    }

    &-y-#{$size} {
      padding-top: $value;
      padding-bottom: $value;
    }
  }
}

@each $side in $sides {
  .margin-#{$side}-auto {
    margin-#{$side}: auto;
  }
}

// Add margin utilities for medium screens only
@media ($medium) {
  @each $size, $value in $sizes {
    .md-margin-#{$size} {
      margin: $value;
    }

    @each $side in $sides {
      .md-margin-#{$side}-#{$size} {
        margin-#{$side}: $value;
      }
    }
  }
}

.padding-bottom-none {
  padding-bottom: 0;
}

// Spacings

.spacing {
  &-x {
    @each $size, $value in $sizes {
      &-#{$size} {
        > *:not(:last-child) {
          margin-right: $value;
        }
      }
    }
  }

  &-y {
    @each $size, $value in $sizes {
      &-#{$size} {
        > *:not(:last-child) {
          margin-bottom: $value;
        }
      }
    }
  }
}

// Display

.block {
  display: block;
}

// Position

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

@each $size, $value in $sizes {
  .top-#{$size} {
    top: $value;
  }

  .right-#{$size} {
    right: $value;
  }

  .bottom-#{$size} {
    bottom: $value;
  }

  .left-#{$size} {
    left: $value;
  }
}

// Z-Indexes

.z-index-1 {
  z-index: 1;
}

// Text

.text-xbold,
.text-weight-800 {
  font-weight: 800;
}

// Vertical Align

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

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

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

// Flex

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

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

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

.align-items-end {
  align-items: flex-end;
}

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

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

.justify-content-end {
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .sm-justify-content-start {
    justify-content: flex-start;
  }
}

// Grid

.grid {
  display: grid;
}

.grid-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 768px) {
  .sm-flex {
    display: flex;
  }

  .sm-flex-col {
    flex-direction: column;
  }

  .sm-flex-col-reverse {
    flex-direction: column-reverse;
  }
}

@media screen and ($medium) {
  .md-flex-col {
    flex-direction: column;
  }

  .md-flex-col-reverse {
    flex-direction: column-reverse;
  }
}

@each $size, $value in $sizes {
  .gap-#{$size} {
    gap: $value;
  }

  .gap-y-#{$size} {
    row-gap: $value;
  }
}

@media screen and (max-width: 768px) {
  @each $size, $value in $sizes {
    .sm-gap-#{$size} {
      gap: $value;
    }
  }
}

$widths: 10, 20, 25, 30, 40, 45, 50, 60, 70, 75, 80, 90, 100;

// Add width utilities
@each $width in $widths {
  .width-#{$width} {
    width: #{$width + "%"};
  }
}

@media (max-width: 768px) {
  .segment.sm-whitespace-normal {
    @each $width in $widths {
      .width-#{$width} {
        width: 100%;
      }
    }
  }
}

.min-width-0 {
  min-width: 0;
}

.height-full {
  height: 100%;
}

// Add other utilities for medium screens only
@media ($medium) {
  .segment.md {
    &-quarter {
      width: 25%;
    }

    &-third {
      width: 33.333%;
    }

    &-half {
      width: 50%;
    }

    &-two-third {
      width: 66.666%;
    }

    &-three-quarter {
      width: 75%;
    }

    &-full {
      width: 100%;
    }

    &-auto {
      width: auto;
    }
  }

  .md {
    &-hidden {
      display: none;
    }

    &-whitespace-normal {
      white-space: normal;
    }

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

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.empty-none:empty {
  display: none;
}