/* Horizontal & vertical */

html [vn-horizontal], vn-horizontal, .vn-horizontal,
html [vn-vertical], vn-vertical, .vn-vertical {
    display: flex;

    & > * {
        flex: 1;
    }
}
html [vn-horizontal], vn-horizontal, .vn-horizontal {
    flex-direction: row;
}
html [vn-vertical], vn-vertical, .vn-vertical {
    flex-direction: column;
}

html [reverse] {
    flex-direction: column-reverse;
}
html [wrap] {
    flex-wrap: wrap;
}
html [wrap-reverse] {
    flex-wrap: wrap-reverse;
}

/* Horizontal & vertical childs */

html [vn-auto], vn-auto, .vn-auto {
    flex: initial;
}
html [vn-none], vn-none, .vn-none {
    flex: 0 0 auto;
}
html [vn-one], vn-one, .vn-one {
    flex: 1;
}
html [vn-two], vn-two, .vn-two {
    flex: 2;
}
html [vn-three], vn-three, .vn-three {
    flex: 3;
}
html [vn-four], vn-four, .vn-four {
    flex: 4;
}
html [vn-five], vn-five, .vn-five {
    flex: 5;
}
html [vn-six], vn-six, .vn-six {
    flex: 6;
}
html [vn-seven], vn-seven, .vn-seven {
    flex: 7;
}
html [vn-eight], vn-eight, .vn-eight {
    flex: 8;
}
html [vn-nine], vn-nine, .vn-nine {
    flex: 9;
}
html [vn-ten], vn-ten, .vn-ten {
    flex: 10;
}
html [vn-eleven], vn-eleven, .vn-eleven {
    flex: 11;
}
html [vn-twelve], vn-twelve, .vn-twelve {
    flex: 12;
}