@import "../themes/liberty.globals";
@import "../themes/liberty.mixins";

// Element Space
// --------------------------------------------------
// Creates padding and margin attributes to be used on
// any element

$padding: var(--lu-padding, 16px);
$margin: var(--lu-margin, 16px);

// Padding
// --------------------------------------------------

.lu-no-padding,
[no-padding] {
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;

    @include padding(0);
}

.lu-padding,
[padding] {
    --padding-start: #{$padding};
    --padding-end: #{$padding};
    --padding-top: #{$padding};
    --padding-bottom: #{$padding};

    @include padding($padding);
}

.lu-padding-top,
[padding-top] {
    --padding-top: #{$padding};

    @include padding($padding, null, null, null);
}

.lu-padding-start,
[padding-start] {
    --padding-start: #{$padding};

    @include padding-horizontal($padding, null);
}

.lu-padding-end,
[padding-end] {
    --padding-end: #{$padding};

    @include padding-horizontal(null, $padding);
}

.lu-padding-bottom,
[padding-bottom] {
    --padding-bottom: #{$padding};

    @include padding(null, null, $padding, null);
}

.lu-padding-vertical,
[padding-vertical] {
    --padding-top: #{$padding};
    --padding-bottom: #{$padding};

    @include padding($padding, null, $padding, null);
}

.lu-padding-horizontal,
[padding-horizontal] {
    --padding-start: #{$padding};
    --padding-end: #{$padding};

    @include padding-horizontal($padding);
}


// Margin
// --------------------------------------------------

.lu-no-margin,
[no-margin] {
    --margin-start: 0;
    --margin-end: 0;
    --margin-top: 0;
    --margin-bottom: 0;

    @include margin(0);
}

.lu-margin,
[margin] {
    --margin-start: #{$margin};
    --margin-end: #{$margin};
    --margin-top: #{$margin};
    --margin-bottom: #{$margin};

    @include margin($margin);
}

.lu-margin-top,
[margin-top] {
    --margin-top: #{$margin};

    @include margin($margin, null, null, null);
}

.lu-margin-start,
[margin-start] {
    --margin-start: #{$margin};

    @include margin-horizontal($margin, null);
}

.lu-margin-end,
[margin-end] {
    --margin-end: #{$margin};

    @include margin-horizontal(null, $margin);
}

.lu-margin-bottom,
[margin-bottom] {
    --margin-bottom: #{$margin};

    @include margin(null, null, $margin, null);
}

.lu-margin-vertical,
[margin-vertical] {
    --margin-top: #{$margin};
    --margin-bottom: #{$margin};

    @include margin($margin, null, $margin, null);
}

.lu-margin-horizontal,
[margin-horizontal] {
    --margin-start: #{$margin};
    --margin-end: #{$margin};

    @include margin-horizontal($margin);
}