// container classes

// @mixin to create container styles
make-container($padding-x = $container-fluid-padding-x)
    width 100%
    padding-right $padding-x
    padding-left $padding-x
    margin-right auto
    margin-left auto

// .container-fluid has no padding or margin
.container-fluid
    make-container(0)

// helper classes
.inline
    display inline !important

.inline-flex
    display inline-flex !important

.flex
    display flex !important

.flex-top
    flex 1 0 auto

.flex-bottom
    flex-shrink 0

.contain
    max-height 85vh
    max-width 100vw

.scroll-x
    overflow-x scroll

.scroll-y
    overflow-y scroll

// fix an element to the bottom of the window
.fixed-bottom
    position fixed !important
    bottom 0 !important

// center an element within its container
.center-x
    margin-left auto
    margin-right auto
    left 50%
    transform translateX(-50%)

.center-y
    margin-top auto
    margin-bottom auto
    top 50%
    transform translateY(50%)

.bg-white
    background-color white !important

for j in center left right space-between space-around
    .justify-{j}
        display flex
        justify-content j !important
        width 100% !important

// shorthand to justify left & right
.justify
    @extends .justify-space-between

.auto-width
    width minmax(auto, max-content) !important
    min-width auto !important
    max-width auto !important

for pos in left right center justify
    .text-align-{pos}
        text-align pos !important

// relative padding and margin classes
$pad = 1rem
$margin = 1rem
for i in 0..4
    .p-{i}
        padding $pad * i !important

    .px-{i}
        padding-left $pad * i !important
        padding-right $pad * i !important

    .py-{i}
        padding-top $pad * i !important
        padding-bottom $pad * i !important

    .pl-{i}
        padding-left $pad * i !important

    .pr-{i}
        padding-right $pad * i !important

    .pt-{i}
        padding-top $pad * i !important

    .pb-{i}
        padding-bottom $pad * i !important

    .m-{i}
        margin $margin * i !important

    .mx-{i}
        margin-left $margin * i !important
        margin-right $margin * i !important

    .my-{i}
        margin-top $margin * i !important
        margin-bottom $margin * i !important

    .ml-{i}
        margin-left $margin * i !important

    .mr-{i}
        margin-right $margin * i !important

    .mt-{i}
        margin-top $margin * i !important

    .mb-{i}
        margin-bottom $margin * i !important
