@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

/* 
 Helpers that define margin and padding in pixels 
 *New pattern* Use the numerical value in the name for class selectors
 i.e. "has-padding-24" instead of "has-padding-l"
 */

.is-paddingless {
  padding: 0 !important;
}

.has-short-padding {
  padding: size_variables.$spacing-4 size_variables.$spacing-18;
}

.has-tall-padding {
  padding: size_variables.$spacing-36;
}

.side-padding-4 {
  padding-left: size_variables.$spacing-4;
  padding-right: size_variables.$spacing-4;
}

.has-side-padding-8 {
  padding-left: size_variables.$spacing-8;
  padding-right: size_variables.$spacing-8;
}

.has-side-padding-s {
  padding-left: size_variables.$spacing-12;
  padding-right: size_variables.$spacing-12;
}

.has-padding-8 {
  padding: size_variables.$spacing-8;
}

.has-padding-s {
  padding: size_variables.$spacing-12;
}

.has-padding-xxs {
  padding: size_variables.$spacing-4;
}

.has-padding-m {
  padding: size_variables.$spacing-16;
}

.has-padding-l {
  padding: size_variables.$spacing-24;
}

.has-bottom-padding-s {
  padding-bottom: size_variables.$spacing-12;
}

.has-bottom-padding-m {
  padding-bottom: size_variables.$spacing-16;
}

.has-bottom-padding-l {
  padding-bottom: size_variables.$spacing-24;
}

.top-padding-4 {
  padding-top: size_variables.$spacing-4;
}

.has-top-padding-xs {
  padding-top: size_variables.$spacing-8;
}

.top-padding-10 {
  padding-top: size_variables.$spacing-10;
}

.has-top-padding-s {
  padding-top: size_variables.$spacing-12;
}

.has-top-padding-m {
  padding-top: size_variables.$spacing-16;
}

.has-top-padding-l {
  padding-top: size_variables.$spacing-24;
}

.has-left-padding-xs {
  padding-left: size_variables.$spacing-8;
}

.has-left-padding-s {
  padding-left: size_variables.$spacing-12;
}

.left-padding-16 {
  padding-left: size_variables.$spacing-16;
}

.has-left-padding-l {
  padding-left: size_variables.$spacing-24;
}

.right-padding-4 {
  padding-right: size_variables.$spacing-4;
}

.has-top-padding-xxl {
  padding-top: size_variables.$spacing-48;
}

// All Margin helpers
.is-marginless {
  margin: 0 !important;
}

// spacing-18 is between medium + large
.has-top-bottom-margin {
  margin: size_variables.$spacing-18 0rem;
}

.has-top-bottom-margin-xxs {
  margin: size_variables.$spacing-4 0;
}

// moving towards numerical class names (i.e. -12) and away from s/m/l etc.
.has-top-bottom-margin-12 {
  margin: size_variables.$spacing-12 0;
}

.has-top-margin-negative-m {
  margin-top: -(size_variables.$spacing-16);
}

.has-top-bottom-margin-negative-m {
  margin-top: -(size_variables.$spacing-16);
  margin-bottom: -(size_variables.$spacing-16);
}

.has-top-margin-negative-xxl {
  margin-top: -(size_variables.$spacing-48);
}

.has-left-margin-xxs {
  margin-left: size_variables.$spacing-4;
}

.has-bottom-margin-xxs {
  margin-bottom: size_variables.$spacing-4 !important;
}

.has-bottom-margin-xs {
  margin-bottom: size_variables.$spacing-8 !important;
}

.has-bottom-margin-s {
  margin-bottom: size_variables.$spacing-12;
}

.has-bottom-margin-m {
  margin-bottom: size_variables.$spacing-16;
}

.has-bottom-margin-l {
  margin-bottom: size_variables.$spacing-24;
}

.has-bottom-margin-xl {
  margin-bottom: size_variables.$spacing-36;
}

.has-bottom-margin-xxl {
  margin-bottom: size_variables.$spacing-48;
}

.has-top-margin-xxs {
  margin-top: size_variables.$spacing-4;
}

.has-top-margin-s {
  margin-top: size_variables.$spacing-12;
}

.has-top-margin-xs {
  margin-top: size_variables.$spacing-8;
}

.has-top-margin-m {
  margin-top: size_variables.$spacing-16;
}

.has-top-margin-l {
  margin-top: size_variables.$spacing-24;
}

.has-top-margin-xl {
  margin-top: size_variables.$spacing-36;
}

.has-top-margin-xxl {
  margin-top: size_variables.$spacing-48;
}

.has-top-margin-xxxl {
  margin-top: size_variables.$spacing-64;
}

.has-top-margin-negative-s {
  margin-top: (-1 * size_variables.$spacing-12);
}

.has-left-margin-xxs {
  margin-left: size_variables.$spacing-4;
}

.has-left-margin-xs {
  margin-left: size_variables.$spacing-8;
}

.has-left-margin-s {
  margin-left: size_variables.$spacing-12;
}

.has-left-margin-m {
  margin-left: size_variables.$spacing-16;
}

.has-left-margin-l {
  margin-left: size_variables.$spacing-24;
}

.has-left-margin-xl {
  margin-left: size_variables.$spacing-36;
}

.has-right-margin-4 {
  margin-right: size_variables.$spacing-4;
}

.has-right-margin-8 {
  margin-right: size_variables.$spacing-8;
}

.has-right-margin-m {
  margin-right: size_variables.$spacing-16;
}

.has-right-margin-l {
  margin-right: size_variables.$spacing-24;
}
