:root {
	/* these are values for the display CSS property */
	/*
       --display-values: (
               block,
               flex,
               inline,
               inline-block,
               inline-flex,
               none,
               table,
               table-cell
       );

       // maps edges to respective corners for border-radius
       --edges: (
               top: (top-left, top-right),
               right: (top-right, bottom-right),
               bottom: (bottom-right, bottom-left),
               left: (bottom-left, top-left)
       );
       */

	/*
        These are our margin and padding utility spacers. The default step size we
        use is 8px. This gives us a key of:
            0 => 0px
            1 => 4px
            2 => 8px
            3 => 16px
            4 => 24px
            5 => 32px
            6 => 40px */
	--spacer: 8px;

	/* Our spacing scale */
	--spacer-0: 0; /* 0 */
	--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
	--spacer-2: --spacer; /* 8px */
	--spacer-3: calc(var(--spacer) * 2); /* 16px */
	--spacer-4: calc(var(--spacer) * 3); /* 24px */
	--spacer-5: calc(var(--spacer) * 4); /* 32px */
	--spacer-6: calc(var(--spacer) * 5); /* 40px */

	/*
        /* The list of spacer values
        --spacers: (
                --spacer-0,
                --spacer-1,
                --spacer-2,
                --spacer-3,
                --spacer-4,
                --spacer-5,
                --spacer-6,
        );

        /* And the map of spacers, for easier looping:
        /* @each --scale, --length in --spacer-map { ... }
        --spacer-map: (
                0: --spacer-0,
                1: --spacer-1,
                2: --spacer-2,
                3: --spacer-3,
                4: --spacer-4,
                5: --spacer-5,
                6: --spacer-6,
        );

        /* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
        /* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
        /* 80, 96, etc.
        --spacer-7: --spacer * 6; /* 48px
        --spacer-8: --spacer * 8; /* 64px
        --spacer-9: --spacer * 10; /* 80px
        --spacer-10: --spacer * 12; /* 96px
        --spacer-11: --spacer * 14; /* 112px
        --spacer-12: --spacer * 16; /* 128px

        --spacers-large: (
                7: --spacer-7,
                8: --spacer-8,
                9: --spacer-9,
                10: --spacer-10,
                11: --spacer-11,
                12: --spacer-12,
        );

        --spacer-map-extended: map-merge(
                        (
                                0: 0,
                                1: --spacer-1,
                                2: --spacer-2,
                                3: --spacer-3,
                                4: --spacer-4,
                                5: --spacer-5,
                                6: --spacer-6,
                        ),
                        --spacers-large,
        );

        /* Em spacer variables
        --em-spacer-1: 0.0625em; /* 1/16
        --em-spacer-2: 0.125em; /* 1/8
        --em-spacer-3: 0.25em; /* 1/4
        --em-spacer-4: 0.375em; /* 3/8
        --em-spacer-5: 0.5em; /* 1/2
        --em-spacer-6: 0.75em; /* 3/4

        /* Size scale
        /* Used for buttons, inputs, labels, avatars etc.
        --size: 16px;

        --size-0: 0;
        --size-1: --size; /* 16px
        --size-2: --size-1 +  4px; /* 20px
        --size-3: --size-2 +  4px; /* 24px
        --size-4: --size-3 +  4px; /* 28px
        --size-5: --size-4 +  4px; /* 32px
        --size-6: --size-5 +  8px; /* 40px
        --size-7: --size-6 +  8px; /* 48px
        --size-8: --size-7 + 16px; /* 64px

        /* Fixed-width container variables
        --container-width: 980px;
        --grid-gutter: 10px;

        // Breakpoint widths
        --width-xs: 0;
        // Small screen / phone
        --width-sm: 544px;
        // Medium screen / tablet
        --width-md: 768px;
        // Large screen / desktop (980 + (16 * 2)) <= container + gutters
        --width-lg: 1012px;
        // Extra large screen / wide desktop
        --width-xl: 1280px;

        // Responsive container widths
        --container-sm: --width-sm;
        --container-md: --width-md;
        --container-lg: --width-lg;
        --container-xl: --width-xl;

        // Breakpoints in the form (name: length)
        --breakpoints: (
                sm: --width-sm,
                md: --width-md,
                lg: --width-lg,
                xl: --width-xl
        );

        // This map in the form (breakpoint: variant) is used to iterate over
        // breakpoints and create both responsive and non-responsive classes in one
        // loop:
        --responsive-variants: (
                '': '',
                sm: '-sm',
                md: '-md',
                lg: '-lg',
                xl: '-xl',
        );

        // responsive utility position values
        --responsive-positions: (
                static,
                relative,
                absolute,
                fixed,
                sticky
        );

        --sidebar-width: (
                sm: 220px,
                md: 256px,
                lg: 296px
        );

        --sidebar-narrow-width: (
                md: 240px,
                lg: 256px
        );

        --sidebar-wide-width: (
                lg: 320px,
                xl: 336px
        );

        --gutter: (
                md: --spacer-3,
                lg: --spacer-4,
                xl: --spacer-5
        );

        --gutter-condensed: (
                md: --spacer-3,
                lg: --spacer-3,
                xl: --spacer-4
        );

        --gutter-spacious: (
                md: --spacer-4,
                lg: --spacer-5,
                xl: --spacer-6
        );
        */
}

/* Breakpoints */
@custom-media --sm (min-width: 544px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1012px);
@custom-media --xl (min-width: 544px);