@import (once) "../include/vars";
@import (once) "../include/mixins";

.put-n {
    right: auto!important;
    bottom: auto!important;
    left: 50%!important;
    top: 0!important;
    .translateX(-50%);
    .translateY(-100%);
}

.put-nw {
    right: auto!important;
    bottom: auto!important;
    left: 0!important;
    top: 0!important;
    .translateY(-100%);
}

.put-ne {
    left: auto!important;
    bottom: auto!important;
    top: 0!important;
    right: 0!important;
    .translateY(-100%);
}

.put-wn {
    bottom: auto!important;
    right: auto!important;
    top: 0!important;
    left: 0!important;
    .translateX(-100%);
}

.put-w {
    bottom: auto!important;
    right: auto!important;
    top: 50%!important;
    left: 0!important;
    .translateX(-100%);
    .translateY(-50%);
}

.put-ws {
    top: auto!important;
    right: auto!important;
    bottom: 0!important;
    left: 0!important;
    .translateX(-100%);
}

.put-en {
    bottom: auto!important;
    left: auto!important;
    top: 0!important;
    right: 0!important;
    .translateX(100%);
}

.put-e {
    bottom: auto!important;
    left: auto!important;
    top: 50%!important;
    right: 0!important;
    .translateX(100%);
    .translateY(-50%);
}

.put-es {
    top: auto!important;
    left: auto!important;
    bottom: 0!important;
    right: 0!important;
    .translateX(100%);
}

.put-s {
    bottom: auto!important;
    right: auto!important;
    top: 100%!important;
    left: 0!important;
}

.put-sw {
    bottom: auto!important;
    right: auto!important;
    top: 100%!important;
    left: 50%!important;
    .translateX(-50%);
}

.put-se {
    bottom: auto!important;
    left: auto!important;
    top: 100%!important;
    right: 0!important;
}

.put-left {left: 0!important; right: auto!important;}
.put-right {left: auto!important; right: 0!important;}

.pos-top-left {
    top: 0!important;
    left: 0!important;
    right: auto!important;
    bottom: auto!important;
}

.pos-top-center {
    top: 0!important;
    left: 50%!important;
    right: auto!important;
    bottom: auto!important;
    .translateX(-50%);
}

.pos-top-right {
    right: 0!important;
    top: 0!important;
    left: auto!important;
    bottom: auto!important;
}

.pos-bottom-left {
    top: auto!important;
    right: auto!important;
    left: 0!important;
    bottom: 0!important;
}

.pos-bottom-center {
    top: auto!important;
    left: 50%!important;
    bottom: 0!important;
    right: auto!important;
    .translateX(-50%);
}

.pos-bottom-right {
    bottom: 0!important;
    right: 0!important;
    top: auto!important;
    left: auto!important;
}

.pos-left-center {
    left: 0!important;
    top: 50%!important;
    bottom: auto!important;
    right: auto!important;
    .translateY(-50%);
}

.pos-right-center {
    right: 0;
    top: 50%;
    bottom: auto;
    left: auto;
    .translateY(-50%);
}

.pos-center {
    top: 50%!important;
    left: 50%!important;
    bottom: auto!important;
    right: auto!important;
    .translateX(-50%);
    .translateY(-50%);
}

each(@media-rules, {
    @container (min-width: @value) {
        .put-left-@{key} {left: 0!important; right: auto!important;}
        .put-right-@{key} {left: auto!important; right: 0!important;}

        .put-n-@{key} {
            right: auto!important;
            bottom: auto!important;
            left: 50%!important;
            top: 0!important;
            .translateX(-50%);
            .translateY(-100%);
        }

        .put-nw-@{key} {
            right: auto!important;
            bottom: auto!important;
            left: 0!important;
            top: 0!important;
            .translateY(-100%);
        }

        .put-ne-@{key} {
            left: auto!important;
            bottom: auto!important;
            top: 0!important;
            right: 0!important;
            .translateY(-100%);
        }

        .put-wn-@{key} {
            bottom: auto!important;
            right: auto!important;
            top: 0!important;
            left: 0!important;
            .translateX(-100%);
        }

        .put-w-@{key} {
            bottom: auto!important;
            right: auto!important;
            top: 50%!important;
            left: 0!important;
            .translateX(-100%);
            .translateY(-50%);
        }

        .put-ws-@{key} {
            top: auto!important;
            right: auto!important;
            bottom: 0!important;
            left: 0!important;
            .translateX(-100%);
        }

        .put-en-@{key} {
            bottom: auto!important;
            left: auto!important;
            top: 0!important;
            right: 0!important;
            .translateX(100%);
        }

        .put-e-@{key} {
            bottom: auto!important;
            left: auto!important;
            top: 50%!important;
            right: 0!important;
            .translateX(100%);
            .translateY(-50%);
        }

        .put-es-@{key} {
            top: auto!important;
            left: auto!important;
            bottom: 0!important;
            right: 0!important;
            .translateX(100%);
        }

        .put-s-@{key} {
            bottom: auto!important;
            right: auto!important;
            top: 100%!important;
            left: 0!important;
        }

        .put-sw-@{key} {
            bottom: auto!important;
            right: auto!important;
            top: 100%!important;
            left: 50%!important;
            .translateX(-50%);
        }

        .put-se-@{key} {
            bottom: auto!important;
            left: auto!important;
            top: 100%!important;
            right: 0!important;
        }
    }
})