//Spacing and Sizing

.w-spacing,
.w-spacer {
  width: $spacing;
}

.h-spacing,
.h-spacer {
  height: $spacing;
}

// Height classes
.h-btn-sm { height: $btn-sm-height; }

.w-xxl-px {
  width: $spacing-xl * 4;
}

.padding-top-xxl {
  padding-top: $spacing-lg * 2;
}

.w-sidebar {
  width: $sidebar-width;
}

.w-metasidebar {
  width: $meta-sidebar-width;
}


.mb-heading {
  margin-bottom: $spacing-heading;
}

.mb-section {
  margin-bottom: $section-margin;
}


@include media-breakpoint-down(xs) {
  .add-margin-xs {
    margin-bottom: $spacing-md;
  }
}

@include media-breakpoint-down(sm) {
  .add-margin-sm {
    margin-bottom: $spacing-md;
  }
}


.gap-0 {
  gap: 0 !important;
}

//////// Spacing XXS ////////

.w-xxs {
  width: $spacing-xxs;
}

.h-xxs {
  height: $spacing-xxs;
}

.p-xxs {
  padding: $spacing-xxs !important;
}

.px-xxs {
  padding-left: $spacing-xxs !important;
  padding-right: $spacing-xxs !important;
}

.py-xxs {
  padding-top: $spacing-xxs !important;
  padding-bottom: $spacing-xxs !important;
}

.pt-xxs {
  padding-top: $spacing-xxs !important;
}

.pb-xxs {
  padding-bottom: $spacing-xxs !important;
}

.pl-xxs {
  padding-left: $spacing-xxs !important;
}

.pr-xxs {
  padding-right: $spacing-xxs !important;
}

.m-xxs {
  margin: $spacing-xxs !important;
}

.mx-xxs {
  margin-left: $spacing-xxs !important;
  margin-right: $spacing-xxs !important;
}

.my-xxs {
  margin-top: $spacing-xxs !important;
  margin-bottom: $spacing-xxs !important;
}

.mt-xxs {
  margin-top: $spacing-xxs !important;
}

.mb-xxs {
  margin-bottom: $spacing-xxs !important;
}

.ml-xxs {
  margin-left: $spacing-xxs !important;
}

.mr-xxs {
  margin-right: $spacing-xxs !important;
}

.gap-xxs {
  gap: $spacing-xxs !important;
}

//////// Spacing XS ////////

.w-xs {
  width: $spacing-xs;
}

.h-xs {
  height: $spacing-xs;
}

.p-xs {
  padding: $spacing-xs !important;
}

.px-xs {
  padding-left: $spacing-xs !important;
  padding-right: $spacing-xs !important;
}

.py-xs {
  padding-top: $spacing-xs !important;
  padding-bottom: $spacing-xs !important;
}

.pt-xs {
  padding-top: $spacing-xs !important;
}

.pb-xs {
  padding-bottom: $spacing-xs !important;
}

.pl-xs {
  padding-left: $spacing-xs !important;
}

.pr-xs {
  padding-right: $spacing-xs !important;
}

.m-xs {
  margin: $spacing-xs !important;
}

.mx-xs {
  margin-left: $spacing-xs !important;
  margin-right: $spacing-xs !important;
}

.my-xs {
  margin-top: $spacing-xs !important;
  margin-bottom: $spacing-xs !important;
}

.mt-xs {
  margin-top: $spacing-xs !important;
}

.mb-xs {
  margin-bottom: $spacing-xs !important;
}

.ml-xs {
  margin-left: $spacing-xs !important;
}

.mr-xs {
  margin-right: $spacing-xs !important;
}

//////// Spacing SM ////////

.w-sm {
  width: $spacing-sm;
}

.h-sm {
  height: $spacing-sm;
}

.p-sm {
  padding: $spacing-sm !important;
}

.px-sm {
  padding-left: $spacing-sm !important;
  padding-right: $spacing-sm !important;
}

.py-sm {
  padding-top: $spacing-sm !important;
  padding-bottom: $spacing-sm !important;
}

.pt-sm {
  padding-top: $spacing-sm !important;
}

.pb-sm {
  padding-bottom: $spacing-sm !important;
}

.pl-sm {
  padding-left: $spacing-sm !important;
}

.pr-sm {
  padding-right: $spacing-sm !important;
}

.m-sm {
  margin: $spacing-sm !important;
}

.mx-sm {
  margin-left: $spacing-sm !important;
  margin-right: $spacing-sm !important;
}

.my-sm {
  margin-top: $spacing-sm !important;
  margin-bottom: $spacing-sm !important;
}

.mt-sm {
  margin-top: $spacing-sm !important;
}

.mb-sm {
  margin-bottom: $spacing-sm !important;
}

.ml-sm {
  margin-left: $spacing-sm !important;
}

.mr-sm {
  margin-right: $spacing-sm !important;
}

//////// Spacing MD ////////

.w-md {
  width: $spacing-md;
}

.h-md {
  height: $spacing-md;
}

.p-md {
  padding: $spacing-md !important;
}

.px-md {
  padding-left: $spacing-md !important;
  padding-right: $spacing-md !important;
}

.py-md {
  padding-top: $spacing-md !important;
  padding-bottom: $spacing-md !important;
}

.pt-md {
  padding-top: $spacing-md !important;
}

.pb-md {
  padding-bottom: $spacing-md !important;
}

.pl-md {
  padding-left: $spacing-md !important;
}

.pr-md {
  padding-right: $spacing-md !important;
}

.m-md {
  margin: $spacing-md !important;
}

.mx-md {
  margin-left: $spacing-md !important;
  margin-right: $spacing-md !important;
}

.my-md {
  margin-top: $spacing-md !important;
  margin-bottom: $spacing-md !important;
}

.mt-md {
  margin-top: $spacing-md !important;
}

.mb-md {
  margin-bottom: $spacing-md !important;
}

.ml-md {
  margin-left: $spacing-md !important;
}

.mr-md {
  margin-right: $spacing-md !important;
}


//////// Spacing LG ////////

.w-lg {
  width: $spacing-lg;
}

.h-lg {
  height: $spacing-lg;
}

.p-lg {
  padding: $spacing-lg !important;
}

.px-lg {
  padding-left: $spacing-lg !important;
  padding-right: $spacing-lg !important;
}

.py-lg {
  padding-top: $spacing-lg !important;
  padding-bottom: $spacing-lg !important;
}

.pt-lg {
  padding-top: $spacing-lg !important;
}

.pb-lg {
  padding-bottom: $spacing-lg !important;
}

.pl-lg {
  padding-left: $spacing-lg !important;
}

.pr-lg {
  padding-right: $spacing-lg !important;
}

.m-lg {
  margin: $spacing-lg !important;
}

.mx-lg {
  margin-left: $spacing-lg !important;
  margin-right: $spacing-lg !important;
}

.my-lg {
  margin-top: $spacing-lg !important;
  margin-bottom: $spacing-lg !important;
}

.mt-lg {
  margin-top: $spacing-lg !important;
}

.mb-lg {
  margin-bottom: $spacing-lg !important;
}

.ml-lg {
  margin-left: $spacing-lg !important;
}

.mr-lg {
  margin-right: $spacing-lg !important;
}

//////// Spacing XL ////////

.w-xl {
  width: $spacing-xl;
}

.h-xl {
  height: $spacing-xl;
}

.p-xl {
  padding: $spacing-xl !important;
}

.px-xl {
  padding-left: $spacing-xl !important;
  padding-right: $spacing-xl !important;
}

.py-xl {
  padding-top: $spacing-xl !important;
  padding-bottom: $spacing-xl !important;
}

.pt-xl {
  padding-top: $spacing-xl !important;
}

.pb-xl {
  padding-bottom: $spacing-xl !important;
}

.pl-xl {
  padding-left: $spacing-xl !important;
}

.pr-xl {
  padding-right: $spacing-xl !important;
}

.m-xl {
  margin: $spacing-xl !important;
}

.mx-xl {
  margin-left: $spacing-xl !important;
  margin-right: $spacing-xl !important;
}

.my-xl {
  margin-top: $spacing-xl !important;
  margin-bottom: $spacing-xl !important;
}

.mt-xl {
  margin-top: $spacing-xl !important;
}

.mb-xl {
  margin-bottom: $spacing-xl !important;
}

.ml-xl {
  margin-left: $spacing-xl !important;
}

.mr-xl {
  margin-right: $spacing-xl !important;
}

//////// Spacing XXL ////////

.w-xxl {
  width: $spacing-xxl;
}

.h-xxl {
  height: $spacing-xxl;
}

.p-xxl {
  padding: $spacing-xxl !important;
}

.px-xxl {
  padding-left: $spacing-xxl !important;
  padding-right: $spacing-xxl !important;
}

.py-xxl {
  padding-top: $spacing-xxl !important;
  padding-bottom: $spacing-xxl !important;
}

.pt-xxl {
  padding-top: $spacing-xxl !important;
}

.pb-xxl {
  padding-bottom: $spacing-xxl !important;
}

.pl-xxl {
  padding-left: $spacing-xxl !important;
}

.pr-xxl {
  padding-right: $spacing-xxl !important;
}

.m-xxl {
  margin: $spacing-xxl !important;
}

.mx-xxl {
  margin-left: $spacing-xxl !important;
  margin-right: $spacing-xxl !important;
}

.my-xxl {
  margin-top: $spacing-xxl !important;
  margin-bottom: $spacing-xxl !important;
}

.mt-xxl {
  margin-top: $spacing-xxl !important;
}

.mb-xxl {
  margin-bottom: $spacing-xxl !important;
}

.ml-xxl {
  margin-left: $spacing-xxl !important;
}

.mr-xxl {
  margin-right: $spacing-xxl !important;
}


.xs-fullwidth {
  @include media-breakpoint-down(xs) {
    display: block;
    width: 100% !important;
  }
}

.auto-width {
  width: auto;
}

.fullwidth {
  width: 100% !important;
}

.nomargin {
  margin: 0 !important;
}

.nopadding {
  padding: 0 !important;
}

.h-100, .h-full {
  height: 100%;
}

.w-100, .w-full {
  width: 100%;
}

.mr-icon-spacing {
  margin-right: $icon-spacing;
}

.ml-icon-spacing {
  margin-left: $icon-spacing;
}


//////// Spacing XXXS ////////

.w-xxxs {
  width: $spacing-xxxs;
}

.h-xxxs {
  height: $spacing-xxxs;
}

.p-xxxs {
  padding: $spacing-xxxs !important;
}

.px-xxxs {
  padding-left: $spacing-xxxs !important;
  padding-right: $spacing-xxxs !important;
}

.py-xxxs {
  padding-top: $spacing-xxxs !important;
  padding-bottom: $spacing-xxxs !important;
}

.pt-xxxs {
  padding-top: $spacing-xxxs !important;
}

.pb-xxxs {
  padding-bottom: $spacing-xxxs !important;
}

.pl-xxxs {
  padding-left: $spacing-xxxs !important;
}

.pr-xxxs {
  padding-right: $spacing-xxxs !important;
}

.m-xxxs {
  margin: $spacing-xxxs !important;
}

.mx-xxxs {
  margin-left: $spacing-xxxs !important;
  margin-right: $spacing-xxxs !important;
}

.my-xxxs {
  margin-top: $spacing-xxxs !important;
  margin-bottom: $spacing-xxxs !important;
}

.mt-xxxs {
  margin-top: $spacing-xxxs !important;
}

.mb-xxxs {
  margin-bottom: $spacing-xxxs !important;
}

.ml-xxxs {
  margin-left: $spacing-xxxs !important;
}

.mr-xxxs {
  margin-right: $spacing-xxxs !important;
}

//////// Spacing 2XL ////////

.w-2xl {
  width: $spacing-2xl;
}

.h-2xl {
  height: $spacing-2xl;
}

.p-2xl {
  padding: $spacing-2xl !important;
}

.px-2xl {
  padding-left: $spacing-2xl !important;
  padding-right: $spacing-2xl !important;
}

.py-2xl {
  padding-top: $spacing-2xl !important;
  padding-bottom: $spacing-2xl !important;
}

.pt-2xl {
  padding-top: $spacing-2xl !important;
}

.pb-2xl {
  padding-bottom: $spacing-2xl !important;
}

.pl-2xl {
  padding-left: $spacing-2xl !important;
}

.pr-2xl {
  padding-right: $spacing-2xl !important;
}

.m-2xl {
  margin: $spacing-2xl !important;
}

.mx-2xl {
  margin-left: $spacing-2xl !important;
  margin-right: $spacing-2xl !important;
}

.my-2xl {
  margin-top: $spacing-2xl !important;
  margin-bottom: $spacing-2xl !important;
}

.mt-2xl {
  margin-top: $spacing-2xl !important;
}

.mb-2xl {
  margin-bottom: $spacing-2xl !important;
}

.ml-2xl {
  margin-left: $spacing-2xl !important;
}

.mr-2xl {
  margin-right: $spacing-2xl !important;
}

//////// Spacing 3XL ////////

.w-3xl {
  width: $spacing-3xl;
}

.h-3xl {
  height: $spacing-3xl;
}

.p-3xl {
  padding: $spacing-3xl !important;
}

.px-3xl {
  padding-left: $spacing-3xl !important;
  padding-right: $spacing-3xl !important;
}

.py-3xl {
  padding-top: $spacing-3xl !important;
  padding-bottom: $spacing-3xl !important;
}

.pt-3xl {
  padding-top: $spacing-3xl !important;
}

.pb-3xl {
  padding-bottom: $spacing-3xl !important;
}

.pl-3xl {
  padding-left: $spacing-3xl !important;
}

.pr-3xl {
  padding-right: $spacing-3xl !important;
}

.m-3xl {
  margin: $spacing-3xl !important;
}

.mx-3xl {
  margin-left: $spacing-3xl !important;
  margin-right: $spacing-3xl !important;
}

.my-3xl {
  margin-top: $spacing-3xl !important;
  margin-bottom: $spacing-3xl !important;
}

.mt-3xl {
  margin-top: $spacing-3xl !important;
}

.mb-3xl {
  margin-bottom: $spacing-3xl !important;
}

.ml-3xl {
  margin-left: $spacing-3xl !important;
}

.mr-3xl {
  margin-right: $spacing-3xl !important;
}

//////// Spacing 4XL ////////

.w-4xl {
  width: $spacing-4xl;
}

.h-4xl {
  height: $spacing-4xl;
}

.p-4xl {
  padding: $spacing-4xl !important;
}

.px-4xl {
  padding-left: $spacing-4xl !important;
  padding-right: $spacing-4xl !important;
}

.py-4xl {
  padding-top: $spacing-4xl !important;
  padding-bottom: $spacing-4xl !important;
}

.pt-4xl {
  padding-top: $spacing-4xl !important;
}

.pb-4xl {
  padding-bottom: $spacing-4xl !important;
}

.pl-4xl {
  padding-left: $spacing-4xl !important;
}

.pr-4xl {
  padding-right: $spacing-4xl !important;
}

.m-4xl {
  margin: $spacing-4xl !important;
}

.mx-4xl {
  margin-left: $spacing-4xl !important;
  margin-right: $spacing-4xl !important;
}

.my-4xl {
  margin-top: $spacing-4xl !important;
  margin-bottom: $spacing-4xl !important;
}

.mt-4xl {
  margin-top: $spacing-4xl !important;
}

.mb-4xl {
  margin-bottom: $spacing-4xl !important;
}

.ml-4xl {
  margin-left: $spacing-4xl !important;
}

.mr-4xl {
  margin-right: $spacing-4xl !important;
}

//////// Spacing 5XL ////////

.w-5xl {
  width: $spacing-5xl;
}

.h-5xl {
  height: $spacing-5xl;
}

.p-5xl {
  padding: $spacing-5xl !important;
}

.px-5xl {
  padding-left: $spacing-5xl !important;
  padding-right: $spacing-5xl !important;
}

.py-5xl {
  padding-top: $spacing-5xl !important;
  padding-bottom: $spacing-5xl !important;
}

.pt-5xl {
  padding-top: $spacing-5xl !important;
}

.pb-5xl {
  padding-bottom: $spacing-5xl !important;
}

.pl-5xl {
  padding-left: $spacing-5xl !important;
}

.pr-5xl {
  padding-right: $spacing-5xl !important;
}

.m-5xl {
  margin: $spacing-5xl !important;
}

.mx-5xl {
  margin-left: $spacing-5xl !important;
  margin-right: $spacing-5xl !important;
}

.my-5xl {
  margin-top: $spacing-5xl !important;
  margin-bottom: $spacing-5xl !important;
}

.mt-5xl {
  margin-top: $spacing-5xl !important;
}

.mb-5xl {
  margin-bottom: $spacing-5xl !important;
}

.ml-5xl {
  margin-left: $spacing-5xl !important;
}

.mr-5xl {
  margin-right: $spacing-5xl !important;
}

//////// Spacing 6XL ////////

.w-6xl {
  width: $spacing-6xl;
}

.h-6xl {
  height: $spacing-6xl;
}

.p-6xl {
  padding: $spacing-6xl !important;
}

.px-6xl {
  padding-left: $spacing-6xl !important;
  padding-right: $spacing-6xl !important;
}

.py-6xl {
  padding-top: $spacing-6xl !important;
  padding-bottom: $spacing-6xl !important;
}

.pt-6xl {
  padding-top: $spacing-6xl !important;
}

.pb-6xl {
  padding-bottom: $spacing-6xl !important;
}

.pl-6xl {
  padding-left: $spacing-6xl !important;
}

.pr-6xl {
  padding-right: $spacing-6xl !important;
}

.m-6xl {
  margin: $spacing-6xl !important;
}

.mx-6xl {
  margin-left: $spacing-6xl !important;
  margin-right: $spacing-6xl !important;
}

.my-6xl {
  margin-top: $spacing-6xl !important;
  margin-bottom: $spacing-6xl !important;
}

.mt-6xl {
  margin-top: $spacing-6xl !important;
}

.mb-6xl {
  margin-bottom: $spacing-6xl !important;
}

.ml-6xl {
  margin-left: $spacing-6xl !important;
}

.mr-6xl {
  margin-right: $spacing-6xl !important;
}

//////// Spacing 7XL ////////

.w-7xl {
  width: $spacing-7xl;
}

.h-7xl {
  height: $spacing-7xl;
}

.p-7xl {
  padding: $spacing-7xl !important;
}

.px-7xl {
  padding-left: $spacing-7xl !important;
  padding-right: $spacing-7xl !important;
}

.py-7xl {
  padding-top: $spacing-7xl !important;
  padding-bottom: $spacing-7xl !important;
}

.pt-7xl {
  padding-top: $spacing-7xl !important;
}

.pb-7xl {
  padding-bottom: $spacing-7xl !important;
}

.pl-7xl {
  padding-left: $spacing-7xl !important;
}

.pr-7xl {
  padding-right: $spacing-7xl !important;
}

.m-7xl {
  margin: $spacing-7xl !important;
}

.mx-7xl {
  margin-left: $spacing-7xl !important;
  margin-right: $spacing-7xl !important;
}

.my-7xl {
  margin-top: $spacing-7xl !important;
  margin-bottom: $spacing-7xl !important;
}

.mt-7xl {
  margin-top: $spacing-7xl !important;
}

.mb-7xl {
  margin-bottom: $spacing-7xl !important;
}

.ml-7xl {
  margin-left: $spacing-7xl !important;
}

.mr-7xl {
  margin-right: $spacing-7xl !important;
}

//////// Spacing 8XL ////////

.w-8xl {
  width: $spacing-8xl;
}

.h-8xl {
  height: $spacing-8xl;
}

.p-8xl {
  padding: $spacing-8xl !important;
}

.px-8xl {
  padding-left: $spacing-8xl !important;
  padding-right: $spacing-8xl !important;
}

.py-8xl {
  padding-top: $spacing-8xl !important;
  padding-bottom: $spacing-8xl !important;
}

.pt-8xl {
  padding-top: $spacing-8xl !important;
}

.pb-8xl {
  padding-bottom: $spacing-8xl !important;
}

.pl-8xl {
  padding-left: $spacing-8xl !important;
}

.pr-8xl {
  padding-right: $spacing-8xl !important;
}

.m-8xl {
  margin: $spacing-8xl !important;
}

.mx-8xl {
  margin-left: $spacing-8xl !important;
  margin-right: $spacing-8xl !important;
}

.my-8xl {
  margin-top: $spacing-8xl !important;
  margin-bottom: $spacing-8xl !important;
}

.mt-8xl {
  margin-top: $spacing-8xl !important;
}

.mb-8xl {
  margin-bottom: $spacing-8xl !important;
}

.ml-8xl {
  margin-left: $spacing-8xl !important;
}

.mr-8xl {
  margin-right: $spacing-8xl !important;
}

//////// Max-Width Classes ////////

.max-w-paragraph {
  max-width: 30rem;
}

.max-w-capped {
  max-width: $capped-width;
}

.max-w-xxxs {
  max-width: $spacing-xxxs;
}

.max-w-xxs {
  max-width: $spacing-xxs;
}

.max-w-xs {
  max-width: $spacing-xs;
}

.max-w-sm {
  max-width: $spacing-sm;
}

.max-w-md {
  max-width: $spacing-md;
}

.max-w-lg {
  max-width: $spacing-lg;
}

.max-w-xl {
  max-width: $spacing-xl;
}

.max-w-xxl {
  max-width: $spacing-xxl;
}

.max-w-2xl {
  max-width: $spacing-2xl;
}

.max-w-3xl {
  max-width: $spacing-3xl;
}

.max-w-4xl {
  max-width: $spacing-4xl;
}

.max-w-5xl {
  max-width: $spacing-5xl;
}

.max-w-6xl {
  max-width: $spacing-6xl;
}

.max-w-7xl {
  max-width: $spacing-7xl;
}

.max-w-8xl {
  max-width: $spacing-8xl;
}

// Min width classes

.min-w-sm { min-width: $spacing-sm; }
.min-w-md { min-width: $spacing-md; }
.min-w-lg { min-width: $spacing-lg; }
.min-w-xl { min-width: $spacing-xl; }
.min-w-2xl { min-width: $spacing-2xl; }
.min-w-3xl { min-width: $spacing-3xl; }
.min-w-4xl { min-width: $spacing-4xl; }
.min-w-5xl { min-width: $spacing-5xl; }
.min-w-6xl { min-width: $spacing-6xl; }
.min-w-7xl { min-width: $spacing-7xl; }
.min-w-8xl { min-width: $spacing-8xl; }

// Gap classes for grid and flexbox

.gap-1px {
  gap: 1px;
}

.gap-defaultgutter {
  gap: $grid-gutter-width;
}

.gap-xs {
  gap: $spacing-xs !important;
}

.gap-sm {
  gap: $spacing-sm !important;
}

.gap-md {
  gap: $spacing-md !important;
}

.gap-lg {
  gap: $spacing-lg !important;
}

.gap-xl {
  gap: $spacing-xl !important;
}

.gap-xxl {
  gap: $spacing-xxl !important;
}