$z-index-values:
    -2,
    -1,
    0,
    1;

$padding-sizes:
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 21,
    22, 24, 26, 28, 29, 30, 32, 34, 38, 40, 58, 100;

$margin-sizes:
    -47,
    -15,
    -8,
    -6,
    -4,
    -2,
    -1,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    10,
    11,
    12,
    14,
    15,
    16,
    18,
    20,
    22,
    23,
    24,
    26,
    28,
    30,
    32,
    34,
    38,
    40,
    44,
    48,
    52,
    64;

.mb-12 {
    margin-bottom: 12px !important;
}
.mr-12 {
    margin-right: 12px !important;
}

.w-full {
    width: 100%;
}

.w-fit-content {
    width: fit-content;
}

.m-w-fit-content {
    max-width: fit-content;
}

@for $i from -40 through 100 {
    .top {
        &-#{$i} {
            top: #{$i}px;
        }
    }

    .right {
        &-#{$i} {
            right: #{$i}px;
        }
    }

    .left {
        &-#{$i} {
            left: #{$i}px;
        }
    }

    .bottom {
        &-#{$i} {
            bottom: #{$i}px;
        }
    }
}

.gutter {
    &-x {
        &-0 {
            --bs-gutter-x: 0px !important;
        }
        &-12 {
            --bs-gutter-x: 12px !important;
        }
    }

    &-y {
        &-4 {
            --bs-gutter-y: 4px !important;
        }
        &-8 {
            --bs-gutter-y: 8px !important;
        }
        &-12 {
            --bs-gutter-y: 12px !important;
        }
    }
}

.gap {
    &-4 {
        gap: 4px;
    }
    &-6 {
        gap: 6px;
    }
    &-8 {
        gap: 8px;
    }
    &-10 {
        gap: 10px;
    }
    &-12 {
        gap: 12px;
    }
    &-14 {
        gap: 14px;
    }
    &-16 {
        gap: 16px;
    }
    &-20 {
        gap: 20px;
    }
    &-26 {
        gap: 26px;
    }
    &-34 {
        gap: 34px;
    }

    &-responsive {
        &-48-32 {
            gap: 48px;

            @media (max-width: 1440px) {
                gap: 32px;
            }
        }
    }

    // class to not override bootstrap gap
    &-px-2 {
        gap: 2px;
    }
    &-px-4 {
        gap: 4px;
    }
    &-px-6 {
        gap: 6px;
    }
    &-px-8 {
        gap: 8px;
    }
    &-px-32 {
        gap: 32px;
    }
}

.grid-gap {
    &-8 {
        gap: 8px;
    }
}

.top {
    &--1 {
        top: -1px;
    }
    &--5 {
        top: -5px;
    }
    &-1 {
        top: 1px;
    }
    &-2 {
        top: 2px;
    }
    &--14 {
        top: -14px;
    }
}

.right {
    &--15 {
        right: -15px;
    }
    &--28 {
        right: -28px;
    }
    &-1-5 {
        right: 1.5px;
    }
    &-100 {
        right: 100%;
    }
}

.left {
    &-100 {
        left: 100%;
    }
}

.z-index {
    @each $value in $z-index-values {
        &-#{$value} {
            z-index: #{$value};
        }
    }
}

.outline {
    &-none {
        outline: none;
    }
}

.p {
    @each $size in $padding-sizes {
        &-#{$size} {
            padding: #{$size}px !important;
        }

        &-l-#{$size} {
            padding-left: #{$size}px;
        }

        &-r-#{$size} {
            padding-right: #{$size}px;
        }

        &-t-#{$size} {
            padding-top: #{$size}px;
        }
        &-b-#{$size} {
            padding-bottom: #{$size}px;
        }
    }

    &-y {
        @each $size in $padding-sizes {
            &-#{$size} {
                padding-top: #{$size}px;
                padding-bottom: #{$size}px;
            }
        }
    }

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

.m {
    @each $size in $margin-sizes {
        &-#{$size} {
            margin: #{$size}px;
        }
        &-y-#{$size} {
            margin-top: #{$size}px;
            margin-bottom: #{$size}px;
        }
        &-x-#{$size} {
            margin-left: #{$size}px;
            margin-right: #{$size}px;
        }
        &-t-#{$size} {
            margin-top: #{$size}px;
        }
        &-r-#{$size} {
            margin-right: #{$size}px;
        }
        &-b-#{$size} {
            margin-bottom: #{$size}px;
        }
        &-l-#{$size} {
            margin-left: #{$size}px;
        }
    }
}