/*  UTLITIES: SPACING
//////////////////////////////////////////////////////////////////////////////*/

@layer utilities {
    .no-padding,
    .padding-0 {
        padding: 0;
    }
    .no-margin,
    .margin-0 {
        margin: 0;
    }

    .padding-xs {
        padding: var(--spacing-xs);
    }

    .padding-s {
        padding: var(--spacing-s);
    }

    .padding-m {
        padding: var(--spacing-m);
    }

    .padding-l {
        padding: var(--spacing-l);
    }
    .padding-right-m {
        padding-right: var(--spacing-m);
    }
    .padding-right-l {
        padding-right: var(--spacing-l);
    }
    .padding-block-m {
        padding-block: var(--spacing-m);
    }
    .padding-block-l {
        padding-block: var(--spacing-l);
    }

    .margin-bottom-s {
        margin-bottom: var(--spacing-s);
    }
    .margin-bottom-m {
        margin-bottom: var(--spacing-m);
    }
    .margin-bottom-l {
        margin-bottom: var(--spacing-l);
    }
    .margin-top-xs {
        margin-top: var(--spacing-xs);
    }
    .margin-top-s {
        margin-top: var(--spacing-s);
    }
    .margin-top-m {
        margin-top: var(--spacing-m);
    }
    .margin-top-l {
        margin-top: var(--spacing-l);
    }
    .margin-top-xl {
        margin-top: var(--spacing-xl);
    }
    .margin-top-0 {
        margin-top: 0;
    }
    .padding-right-l {
        padding-right: var(--spacing-l);
    }
    .padding-right-xl {
        padding-right: var(--spacing-xl);
    }

    .padding-top-0 {
        padding-top: 0;
    }
    .padding-top-m {
        padding-top: var(--spacing-m);
    }
    .padding-top-l {
        padding-top: var(--spacing-l);
    }
    .padding-top-xl {
        padding-top: var(--spacing-xl);
    }
    .padding-bottom-l {
        padding-bottom: var(--spacing-l);
    }
    .padding-bottom-s {
        padding-bottom: var(--spacing-s);
    }
    .margin-0 {
        margin: 0;
    }
    .margin-bottom-0 {
        margin-bottom: 0;
    }
    .margin-bottom-m {
        margin-bottom: var(--spacing-m);
    }
    .margin-bottom-xl {
        margin-bottom: var(--spacing-xl);
    }
    .margin-bottom-auto {
        margin-bottom: auto !important;
    }

    @media (min-width: 980px) {
        .negative-y-offset-m {
            margin-top: calc(var(--spacing-m) * -1);
        }
    }
    @media (max-width: 980px) {
        .mobile-padding-inline-m {
            padding-inline: var(--spacing-m);
        }
        .mobile-padding-inline-0 {
            padding-inline: 0;
        }
    }
}