@use "../global";

$widthSizes: 0 xxs xs s m l xl xxl;

:root {
    --width-xxl: 160rem;
    --width-xl: 140rem;
    --width-l: 120rem;
    --width-m: 100rem;
    --width-s: 80rem;
    --width-xs: 60rem;
    --width-xxs: 35rem;
    --container-gap: var(--size-xxl);

    @each $wSize in $widthSizes {
        --width-#{$wSize}-sidepadding: calc(calc(100% - var(--width-#{$wSize})) / 2);
    }
}

.c {
    padding-left: var(--container-gap);
    padding-right: var(--container-gap);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    position: relative;
}
    @media (max-width: 48rem) {
        :root { --container-gap: var(--size); }
    }
    @media (max-width: 62rem) {
        :root { --container-gap: var(--size-l); }
    }

@mixin variant ($name: null) {
    $prefix: null;
    @if $name != null {
        $prefix: #{$name}\:
    }
    @each $wSize in $widthSizes {
        $value: var(--width-#{$wSize});
        $maxwWidthValue: var(--width-#{$wSize});
        @if $wSize == 0 {
            $value: 0;
            $maxwWidthValue: none;
        }
        .#{$prefix}w-#{$wSize} { width: #{$value}; max-width: 100%; }
        .#{$prefix}max-w-#{$wSize} { max-width: #{$maxwWidthValue}; }
        .#{$prefix}min-w-#{$wSize} { min-width: #{$value}; }
    }
    .#{$prefix}w-1 { width: 8.33333%; }
    .#{$prefix}w-2 { width: 16.66667%; }
    .#{$prefix}w-2\.4 { width: 20%; }
    .#{$prefix}w-3 { width: 25%; }
    .#{$prefix}w-4 { width: 33.33333%; }
    .#{$prefix}w-5 { width: 41.66667%; }
    .#{$prefix}w-6 { width: 50%; }
    .#{$prefix}w-7 { width: 58.33333%; }
    .#{$prefix}w-8 { width: 66.66667%; }
    .#{$prefix}w-9 { width: 75%; }
    .#{$prefix}w-10 { width: 83.33333%; }
    .#{$prefix}w-11 { width: 91.66667%; }
    .#{$prefix}w-12 { width: 100%; }

    .#{$prefix}h-12 { height: 100%; }
    .#{$prefix}max-h-12 { max-height: 100%; }
    .#{$prefix}min-h-12 { min-height: 100%; }
}
.w-auto { width: auto !important; }

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

/* Fixed sizes */
$fixedSizes: (
    '16': 1.6rem,
    '24': 2.4rem,
    '30': 3rem,
    '32': 3.2rem,
    '40': 4rem,
    '48': 4.8rem,
    '56': 5.6rem,
    '64': 6.4rem,
    '72': 7.2rem,
    '80': 8rem,
);

@each $fixedName, $fixedSize in $fixedSizes {
    .w-#{$fixedName} { width: #{$fixedSize}; }
    .h-#{$fixedName} { height: #{$fixedSize}; }
}

.w-var,
.wh-var { width: calc(var(--width) * 0.1rem); }
.wh-var { height: calc(var(--height) * 0.1rem); }
.h-var { height: calc(var(--height) * 0.1rem); }