@use "../global";

@mixin variant ($name: null) {
    $prefix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }

    .#{$prefix}flex { display: flex; align-items: flex-start; }
    .#{$prefix}flex-inline { display: inline-flex; }
    .#{$prefix}flex-row { flex-direction: row; }
    .#{$prefix}flex-row-reverse { flex-direction: row-reverse; }
    .#{$prefix}flex-col { flex-direction: column; }
    .#{$prefix}flex-col-reverse { flex-direction: column-reverse; }
    .#{$prefix}flex-wrap { flex-wrap: wrap; }
    .#{$prefix}flex-no-wrap { flex-wrap: nowrap; }

    .#{$prefix}align-start { align-items: flex-start; }
    .#{$prefix}align-end { align-items: flex-end; }
    .#{$prefix}align-center { align-items: center; }
    .#{$prefix}align-baseline { align-items: baseline; }
    .#{$prefix}align-stretch { align-items: stretch; }

    .#{$prefix}justify-start { justify-content: flex-start; }
    .#{$prefix}justify-end { justify-content: flex-end; }
    .#{$prefix}justify-center { justify-content: center; }
    .#{$prefix}justify-between { justify-content: space-between; }
    .#{$prefix}justify-around { justify-content: space-around; }
    .#{$prefix}justify-evenly { justify-content: space-evenly; }

    .#{$prefix}flex-grow { flex-grow: 1; }
    .#{$prefix}flex-grow-0 { flex-grow: 0; }
    .#{$prefix}flex-shrink { flex-shrink: 1; }
    .#{$prefix}flex-shrink-0 { flex-shrink: 0; }

    .#{$prefix}order-1 { order: 1; }
    .#{$prefix}order-2 { order: 2; }
    .#{$prefix}order-3 { order: 3; }
    .#{$prefix}order-4 { order: 4; }
    .#{$prefix}order-5 { order: 5; }
    .#{$prefix}order-99 { order: 99; }

    .#{$prefix}gap-0 { gap: 0; }
    .#{$prefix}gap-s { gap: var(--size-s); }
    .#{$prefix}gap-r { gap: var(--size); }
    .#{$prefix}gap-m { gap: var(--size-m); }
    .#{$prefix}gap-l { gap: var(--size-l); }
    .#{$prefix}gap-xl { gap: var(--size-xl); }
    .#{$prefix}gap-xxl { gap: var(--size-xxl); }
}

@include variant;
@each $bpname, $bpsize in global.$breakpoints {
    @media #{$bpsize} {
        @include variant($bpname);
    }
}