/**
 * CSS spacing classes
 *
 * vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
 *      T         D                     S
 * 
 * T - type
 *     - values: p (padding), m (margin)
 * 
 * D - direction
 *     - values:
 *             t (top), r (right), b (bottom), l (left),
 *             a (all), x (both left & right), y (both top & bottom)
 * 
 * S - size
 *     - values:
 *             none,
 *             auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
 *             xs (extra small),
 *             sm (small),
 *             md (medium),
 *             lg (large),
 *             xl (extra large)
 */

/* ++++++++++++++++++++++++++++++++++++++++++++++++ Padding */

.vn-pa-none {
    padding: 0;
}
.vn-pl-none {
    padding-left: 0;
}
.vn-pr-none {
    padding-right: 0;
}
.vn-pt-none {
    padding-top: 0;
}
.vn-pb-none {
    padding-bottom: 0;
}
.vn-py-none {
    padding-top: 0;
    padding-bottom: 0;
}
.vn-px-none {
    padding-left: 0;
    padding-right: 0;
}

.vn-pa-xs {
    padding: 4px;
}
.vn-pl-xs {
    padding-left: 4px;
}
.vn-pr-xs {
    padding-right: 4px;
}
.vn-pt-xs {
    padding-top: 4px;
}
.vn-pb-xs {
    padding-bottom: 4px;
}
.vn-py-xs {
    padding-top: 4px;
    padding-bottom: 4px;
}
.vn-px-xs {
    padding-left: 4px;
    padding-right: 4px;
}

/* Small */

.vn-pa-sm {
        padding: 8px;
}
.vn-pl-sm {
    padding-left: 8px;
}
.vn-pr-sm {
    padding-right: 8px;
}
.vn-pt-sm {
    padding-top: 8px;
}
.vn-pb-sm {
    padding-bottom: 8px;
}
.vn-py-sm {
    padding-top: 8px;
    padding-bottom: 8px;
}
.vn-px-sm {
    padding-left: 8px;
    padding-right: 8px;
}

/* Medium */

.vn-pa-md {
    padding: 16px;
}
.vn-pl-md {
    padding-left: 16px;
}
.vn-pr-md {
    padding-right: 16px;
}
.vn-pt-md {
    padding-top: 16px;
}
.vn-pb-md {
    padding-bottom: 16px;
}
.vn-py-md {
    padding-top: 16px;
    padding-bottom: 16px;
}
.vn-px-md {
    padding-left: 16px;
    padding-right: 16px;
}

/* Large */

.vn-pa-lg {
    padding: 32px;
}
.vn-pl-lg {
    padding-left: 32px;
}
.vn-pr-lg {
    padding-right: 32px;
}
.vn-pt-lg {
    padding-top: 32px;
}
.vn-pb-lg {
    padding-bottom: 32px;
}
.vn-py-lg {
    padding-top: 32px;
    padding-bottom: 32px;
}
.vn-px-lg {
    padding-left: 32px;
    padding-right: 32px;
}

/* Extra large */

.vn-pa-xl {
    padding: 100px;
}
.vn-pl-xl {
    padding-left: 100px;
}
.vn-pr-xl {
    padding-right: 100px;
}
.vn-pt-xl {
    padding-top: 100px;
}
.vn-pb-xl {
    padding-bottom: 100px;
}
.vn-py-xl {
    padding-top: 100px;
    padding-bottom: 100px;
}
.vn-px-xl {
    padding-left: 100px;
    padding-right: 100px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ Margin */

/* None */

.vn-ma-none {
    padding: 0;
}
.vn-ml-none {
    padding-left: 0;
}
.vn-mr-none {
    padding-right: 0;
}
.vn-mt-none {
    padding-top: 0;
}
.vn-mb-none {
    padding-bottom: 0;
}
.vn-my-none {
    padding-top: 0;
    padding-bottom: 0;
}
.vn-mx-none {
    padding-left: 0;
    padding-right: 0;
}

/* Auto */

.vn-ml-none {
    padding-left: auto;
}
.vn-mr-none {
    padding-right: auto;
}
.vn-mx-none {
    padding-left: auto;
    padding-right: auto;
}

/* Extra small */

.vn-ma-xs {
    margin: 4px;
}
.vn-mt-xs {
    margin-top: 4px;
}
.vn-ml-xs {
    margin-left: 4px;
}
.vn-mr-xs {
    margin-right: 4px;
}
.vn-mb-xs {
    margin-bottom: 4px;
}
.vn-my-xs {
    margin-top: 4px;
    margin-bottom: 4px;
}
.vn-mx-xs {
    margin-left: 4px;
    margin-right: 4px;
}

/* Small */

.vn-ma-sm {
    margin: 8px;
}
.vn-mt-sm {
    margin-top: 8px;
}
.vn-ml-sm {
    margin-left: 8px;
}
.vn-mr-sm {
    margin-right: 8px;
}
.vn-mb-sm {
    margin-bottom: 8px;
}
.vn-my-sm {
    margin-top: 8px;
    margin-bottom: 8px;
}
.vn-mx-sm {
    margin-left: 8px;
    margin-right: 8px;
}

/* Medium */

.vn-ma-md {
    margin: 16px;
}
.vn-mt-md {
    margin-top: 16px;
}
.vn-ml-md {
    margin-left: 16px;
}
.vn-mr-md {
    margin-right: 16px;
}
.vn-mb-md {
    margin-bottom: 16px;
}
.vn-my-md {
    margin-top: 16px;
    margin-bottom: 16px;
}
.vn-mx-md {
    margin-left: 16px;
    margin-right: 16px;
}

/* Large */

.vn-ma-lg {
    margin: 32px;
}
.vn-mt-lg {
    margin-top: 32px;
}
.vn-ml-lg {
    margin-left: 32px;
}
.vn-mr-lg {
    margin-right: 32px;
}
.vn-mb-lg {
    margin-bottom: 32px;
}
.vn-my-lg {
    margin-top: 32px;
    margin-bottom: 32px;
}
.vn-mx-lg {
    margin-left: 32px;
    margin-right: 32px;
}

/* Extra large */

.vn-ma-xl {
    margin: 100px;
}
.vn-mt-xl {
    margin-top: 100px;
}
.vn-ml-xl {
    margin-left: 100px;
}
.vn-mr-xl {
    margin-right: 100px;
}
.vn-mb-xl {
    margin-bottom: 100px;
}
.vn-my-xl {
    margin-top: 100px;
    margin-bottom: 100px;
}
.vn-mx-xl {
    margin-left: 100px;
    margin-right: 100px;
}