@use "../tokens/space";
@use "../tokens/breakpoint";
@use "../tools/generate";
@use "../tools/layout";

@layer utilities {
  @mixin spacing-utilities() {
    $directions: (
      "top": "t",
      "right": "r",
      "bottom": "b",
      "left": "l",
    );

    .mb {
      margin-bottom: space.get();
    }

    @include breakpoint.each using ($breakpoint) {
      @each $spaceName, $spaceSize in space.$map {
        .mb#{generate.variant-name($breakpoint, "-")}#{generate.variant-name($spaceName, "-")} {
          margin-bottom: $spaceSize !important;
        }
      }
      .mb#{generate.variant-name($breakpoint, "-")}-none {
        margin-bottom: 0 !important;
      }
    }

    @each $directionName, $directionSelector in $directions {
      @if $directionName != bottom {
        .m#{generate.variant-name($directionSelector, "")}-none {
          margin-#{$directionName}: 0 !important;
        }
      }

      .p#{generate.variant-name($directionSelector, "")}-none {
        padding-#{$directionName}: 0 !important;
      }
    }

    .no-mrg {
      margin: 0 !important;
    }

    .no-pad {
      padding: 0 !important;
    }
  }

  @include spacing-utilities;

  .clearfix {
    @include layout.clearfix;
  }
  .clear {
    clear: both;
  }

  // Flexbox alignment classes
  @mixin alignment-classes() {
    @include breakpoint.each using ($breakpoint) {
      // Children justify
      .justify-content-start#{generate.variant-name($breakpoint)} {
        justify-content: flex-start;
      }
      .justify-content-end#{generate.variant-name($breakpoint)} {
        justify-content: flex-end;
      }
      .justify-content-center#{generate.variant-name($breakpoint)} {
        justify-content: center;
      }
      .justify-content-space-around#{generate.variant-name($breakpoint)} {
        justify-content: space-around;
      }
      .justify-content-space-between#{generate.variant-name($breakpoint)} {
        justify-content: space-between;
      }

      // Children align
      .align-items-start#{generate.variant-name($breakpoint)} {
        align-items: flex-start;
      }
      .align-items-end#{generate.variant-name($breakpoint)} {
        align-items: flex-end;
      }
      .align-items-center#{generate.variant-name($breakpoint)} {
        align-items: center;
      }
      .align-items-stretch#{generate.variant-name($breakpoint)} {
        align-items: stretch;
      }

      // Self horizontal alignment
      .align-self-left#{generate.variant-name($breakpoint)} {
        margin-left: 0;
        margin-right: auto;
      }
      .align-self-right#{generate.variant-name($breakpoint)} {
        margin-left: auto;
        margin-right: 0;
      }
      .align-self-center#{generate.variant-name($breakpoint)} {
        margin-left: auto;
        margin-right: auto;
      }

      // Self vertical alignment
      .align-self-top#{generate.variant-name($breakpoint)} {
        align-self: flex-start;
      }
      .align-self-bottom#{generate.variant-name($breakpoint)} {
        align-self: flex-end;
      }
      .align-self-middle#{generate.variant-name($breakpoint)} {
        align-self: center;
      }
      .align-self-stretch#{generate.variant-name($breakpoint)} {
        align-self: stretch;
      }

      .align-self-last#{generate.variant-name($breakpoint)} {
        order: 999;
      }
    }
  }

  @include alignment-classes;

  @mixin aspect-ratio-classes() {
    .aspect-ratio-21-9 {
      max-width: 100%;
      border: 0;
      aspect-ratio: 21 / 9;
    }

    .aspect-ratio-16-9 {
      max-width: 100%;
      border: 0;
      aspect-ratio: 16 / 9;
    }

    .aspect-ratio-4-3 {
      max-width: 100%;
      border: 0;
      aspect-ratio: 4 / 3;
    }

    .aspect-ratio-1-1 {
      max-width: 100%;
      border: 0;
      aspect-ratio: 1 / 1;
    }

    .aspect-ratio-3-2 {
      max-width: 100%;
      border: 0;
      aspect-ratio: 3 / 2;
    }
  }

  @include aspect-ratio-classes;

  @mixin display-classes {
    .d-block {
      display: block;
    }
    .d-inline-block {
      display: inline-block;
    }
    .d-inline {
      display: inline;
    }
    .d-flex {
      display: flex;
    }
    .d-inline-flex {
      display: inline-flex;
    }
    .flex-column {
      flex-direction: column;
    }
  }

  @include display-classes;

  @mixin block-classes {
    .fullwidth {
      width: 100% !important;
    }

    .fullwidth-xs-only {
      @include breakpoint.get("xs", "only") {
        width: 100% !important;
      }
    }

    .fullheight {
      height: 100% !important;
    }

    .center-block {
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  @include block-classes();

  @mixin position-classes {
    .relative {
      position: relative !important;
    }

    .absolute {
      position: absolute !important;
    }
  }

  @include position-classes();
}