/*!
* Visual Designer JQuery Plugin
* Author: Sam Zielke-Ryner
* Licensed under ...
*/

/* Self alignment */
.alignments(@device: -) {
    .vd@{device}left {
        -webkit-align-self: flex-start;
        align-self: flex-start;
        text-align: left;
    }

    .vd@{device}center {
        -webkit-align-self: center;
        align-self: center;
        text-align: center;
    }

    .vd@{device}right {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        text-align: right;
    }

    .vd@{device}top {
        -webkit-justify-self: flex-start;
        justify-self: flex-start;
    }

    .vd@{device}middle {
        -webkit-justify-self: center;
        justify-self: center;
    }

    .vd@{device}bottom {
        -webkit-justify-self: flex-end;
        justify-self: flex-end;
    }



    .vd-abs@{device}left {
        align-self: auto !important;
        position: absolute !important;
        left: 0;
    }

    .vd-abs@{device}center {
        align-self: auto !important;
        position: absolute !important;
        left: 50%;
        transform: translateX(-50%);
    }

    .vd-abs@{device}right {
        align-self: auto !important;
        position: absolute !important;
        right: 0;
    }

    .vd-abs@{device}top {
        position: absolute !important;
        top: 0;
    }

    .vd-abs@{device}middle {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
    }

    .vd-abs@{device}bottom {
        position: absolute !important;
        bottom: 0;
    }




    .vd-stky@{device}left {
        position: sticky !important;
        left: 0;
    }

    .vd-stky@{device}center {
        position: sticky !important;
        left: 50%;
        transform: translateX(-50%);
    }

    .vd-stky@{device}right {
        position: sticky !important;
        right: 0;
    }

    .vd-stky@{device}top {
        position: sticky !important;
        /*align-self: baseline;*/
        top: 0;
    }

    .vd-stky@{device}middle {
        position: sticky !important;
        /*align-self: baseline;*/
        top: 50%;
        transform: translateY(-50%);
    }

    .vd-stky@{device}bottom {
        position: sticky !important;
        /*align-self: baseline;*/
        bottom: 0;
    }
}


/* Inner content alignment */
.content-alignments(@device: -) {
    .vd-c@{device}left {
        -webkit-align-items: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .vd-c@{device}center {
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
    }

    .vd-c@{device}right {
        -webkit-align-items: flex-end;
        align-items: flex-end;
        text-align: right;
    }

    .vd-c@{device}top {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        vertical-align: top;
    }

    .vd-c@{device}middle {
        -webkit-justify-content: center;
        justify-content: center;
        vertical-align: middle;
    }

    .vd-c@{device}bottom {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        vertical-align: bottom;
    }

    .vd-c@{device}stretch {

        div,
        a,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            /*&:not(.vd-abs@{device}left, .vd-abs@{device}center, .vd-abs@{device}right, .vd-abs@{device}top), .vd-abs@{device}middle, .vd-abs@{device}bottom) {*/
            align-self: stretch;
            /*}*/
        }
    }
}



.alignments();
.content-alignments();

body.vd-rtablet,
body.vd-rmobile {
    .alignments(-sm-);
    .content-alignments(-sm-);
}

@media (max-width: 768px) {
    .alignments(-sm-);
    .content-alignments(-sm-);
}

body.vd-rmobile {
    .alignments(-xs-);
    .content-alignments(-xs-);
}

@media (max-width: 479px) {
    .alignments(-xs-);
    .content-alignments(-xs-);
}