/**
 * Size variants
 */

.header {
    &.-sm {
        --header--padding-top: var(
            --header--sm--padding-top,
            calc(10rem * var(--size-multiplier-xs))
        );
        --header--padding-right: var(--header--sm--padding-right, 0);
        --header--padding-bottom: var(
            --header--sm--padding-bottom,
            calc(10rem * var(--size-multiplier-xs))
        );
        --header--padding-left: var(--header--sm--padding-left, 0);
    }

    &.-md {
        --header--padding-top: var(
            --header--md--padding-top,
            calc(10rem * var(--size-multiplier-md))
        );
        --header--padding-right: var(--header--md--padding-right, 0);
        --header--padding-bottom: var(
            --header--md--padding-bottom,
            calc(10rem * var(--size-multiplier-md))
        );
        --header--padding-left: var(--header--md--padding-left, 0);
    }

    &.-lg {
        --header--padding-top: var(
            --header--lg--padding-top,
            calc(10rem * var(--size-multiplier-xl))
        );
        --header--padding-right: var(--header--lg--padding-right, 0);
        --header--padding-bottom: var(
            --header--lg--padding-bottom,
            calc(10rem * var(--size-multiplier-xl))
        );
        --header--padding-left: var(--header--lg--padding-left, 0);
    }
}