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

.vd-container-widget {
    .vd-column-widget;
    width: 100%;
}


/* Horz alignment */
.halignments(@device: -) {
    .vd@{device}horz {
        flex-direction: row !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        margin: 0;

        >[vd-type] when not (@device =-base-) {
            margin: 0px 10px;
        }

        >img,
        >video,
        >audio,
        a>img {
            height: 50px;
            width: auto;
        }

        .vd-sortable-placeholder {
            width: 75px;
            height: 20px;
        }

        &.vd-force-dimensions {
            min-width: 100px !important;
        }

        .vd-row-widget>.vd-column-widget {
            &.vd-force-dimensions {
                min-width: 100px !important;
                min-height: 50px !important;
            }
        }

        >.vd-container-widget {
            width: auto;
            margin: 0;
        }

        &.vd-c@{device}left {
            >.vd-container-widget:last-child {
                flex: 1;
            }
        }

        &.vd-c@{device}right {
            >.vd-container-widget:first-child {
                flex: 1;
            }
        }

        [vd-type],
        .vd-sortable-placeholder,
        [vd-type="link"],
        /*Backwards compat*/
        [vd-link="true"] {
            &.vd-force-dimensions {
                min-width: 100px !important;
                min-height: 50px !important;
            }
        }

        &.vd-c@{device}stretch {
            display: flex;

            div,
            a,
            p,
            span,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                display: flex;
                align-self: stretch;
            }
        }
    }
}


.h-left {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.h-center {
    -webkit-justify-content: center;
    justify-content: center;
    text-justify: center;
}

.h-right {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.h-top() {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    vertical-align: top;
}

.h-middle() {
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    vertical-align: middle;
}

.h-bottom() {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-align-content: flex-end;
    align-content: flex-end;
    vertical-align: bottom;
}

.ialign(@prefix, @device) {
    &.@{prefix}-left {
        .h-left;
    }

    &.@{prefix}-center {
        .h-center;
    }

    &.@{prefix}-right {
        .h-right;
    }

    &.@{prefix}-top {
        .h-top();

        /*&.vd-c@{device}stretch * {
		display: flex;
  	.h-top();
  }*/
    }

    &.@{prefix}-middle {
        .h-middle();

        /*&.vd-c@{device}stretch * {
		display: flex;
  	.h-middle();
  }*/
    }

    &.@{prefix}-bottom {
        .h-bottom();

        /*&.vd-c@{device}stretch * {
		display: flex;
  	.h-bottom();
  }*/
    }
}




.desktop-halignments() {
    .vd-horz {
        .ialign(vd-c, -);

        &.vd-c-stretch {
            &.vd-c-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-bottom * {
                display: flex;
                .h-bottom();
            }
        }
    }
}

.tablet-halignments() {
    .vd-sm-horz {
        .ialign(vd-c, -);
        .ialign(vd-c-sm, -sm-);

        &.vd-c-stretch {
            &.vd-c-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-bottom * {
                display: flex;
                .h-bottom();
            }

            &.vd-c-sm-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-sm-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-sm-bottom * {
                display: flex;
                .h-bottom();
            }
        }
    }
}

.mobile-halignments() {
    .vd-xs-horz {
        .ialign(vd-c, -);
        .ialign(vd-c-sm, -sm-);
        .ialign(vd-c-xs, -xs-);

        &.vd-c-stretch {
            &.vd-c-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-bottom * {
                display: flex;
                .h-bottom();
            }

            &.vd-c-sm-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-sm-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-sm-bottom * {
                display: flex;
                .h-bottom();
            }

            &.vd-c-xs-top * {
                display: flex;
                .h-top();
            }

            &.vd-c-xs-middle * {
                display: flex;
                .h-middle();
            }

            &.vd-c-xs-bottom * {
                display: flex;
                .h-bottom();
            }
        }
    }
}

.halignments(-base-);

@media (min-width: 769px) {
    body:not(.vd-rtablet):not(.vd-rmobile) {
        .halignments();
        .desktop-halignments();
    }
}


body.vd-rtablet {
    .halignments(-sm-);
    .tablet-halignments();
}

@media (max-width: 768px) {
    .halignments(-sm-);
    .tablet-halignments();
}


body.vd-rmobile {
    .halignments(-xs-);
    .mobile-halignments();
}

@media (max-width: 479px) {
    .halignments(-xs-);
    .mobile-halignments();
}