@use 'sass:list';
@use '../abstract/_all';
@use '../abstract/breakpoints';
@use '../abstract/mixins';
@use '../abstract/setup';

.margin-auto {
  margin: 0 auto;
}

@for $i from 1 through list.length(setup.$espaciados) {
  $espaciado: list.nth(setup.$espaciados, $i);
  .m-#{$espaciado} {
    margin: #{$espaciado}px;
  }

  .mx-#{$espaciado} {
    margin-inline: #{$espaciado}px;
  }

  .my-#{$espaciado} {
    margin-top: #{$espaciado}px;
    margin-bottom: #{$espaciado}px;
  }
  .mt-#{$espaciado} {
    margin-top: #{$espaciado}px;
  }
  .mr-#{$espaciado} {
    margin-right: #{$espaciado}px;
  }
  .mb-#{$espaciado} {
    margin-bottom: #{$espaciado}px;
  }
  .ml-#{$espaciado} {
    margin-left: #{$espaciado}px;
  }
  .p-#{$espaciado} {
    padding: #{$espaciado}px;
  }

  .px-#{$espaciado} {
    padding-inline: #{$espaciado}px;
  }

  .py-#{$espaciado} {
    padding-top: #{$espaciado}px;
    padding-bottom: #{$espaciado}px;
  }

  .pt-#{$espaciado} {
    padding-top: #{$espaciado}px;
  }
  .pr-#{$espaciado} {
    padding-right: #{$espaciado}px;
  }
  .pb-#{$espaciado} {
    padding-bottom: #{$espaciado}px;
  }
  .pl-#{$espaciado} {
    padding-left: #{$espaciado}px;
  }
}

// Responsive spacing — generado desde las variables de setup.scss
@include mixins.space(breakpoints.$breakpoints, setup.$margin, setup.$mg);
@include mixins.space(breakpoints.$breakpoints, setup.$margin-top, setup.$mt);
@include mixins.space(breakpoints.$breakpoints, setup.$margin-right, setup.$mr);
@include mixins.space(breakpoints.$breakpoints, setup.$margin-bottom, setup.$mb);
@include mixins.space(breakpoints.$breakpoints, setup.$margin-left, setup.$ml);
@include mixins.space(breakpoints.$breakpoints, setup.$padding, setup.$p);
@include mixins.space(breakpoints.$breakpoints, setup.$padding-top, setup.$pt);
@include mixins.space(breakpoints.$breakpoints, setup.$padding-right, setup.$pr);
@include mixins.space(breakpoints.$breakpoints, setup.$padding-bottom, setup.$pb);
@include mixins.space(breakpoints.$breakpoints, setup.$padding-left, setup.$pl);

.sm\:mb-0 {
  @media (min-width: breakpoints.$break-sm) {
    margin-bottom: 0;
  }
}

.md\:mb-0 {
  @media (min-width: breakpoints.$break-md) {
    margin-bottom: 0;
  }
}

.lg\:mb-0 {
  @media (min-width: breakpoints.$break-lg) {
    margin-bottom: 0;
  }
}

.xl\:mb-0 {
  @media (min-width: breakpoints.$break-xl) {
    margin-bottom: 0;
  }
}

.sm\:mt-0 {
  @media (min-width: breakpoints.$break-sm) {
    margin-top: 0;
  }
}

.md\:mt-0 {
  @media (min-width: breakpoints.$break-md) {
    margin-top: 0;
  }
}

.lg\:mt-0 {
  @media (min-width: breakpoints.$break-lg) {
    margin-top: 0;
  }
}

.xl\:mt-0 {
  @media (min-width: breakpoints.$break-xl) {
    margin-top: 0;
  }
}

.sm\:pr-0 {
  @media (min-width: breakpoints.$break-sm) {
    padding-right: 0;
  }
}

.md\:pr-0 {
  @media (min-width: breakpoints.$break-md) {
    padding-right: 0;
  }
}

.lg\:pr-0 {
  @media (min-width: breakpoints.$break-lg) {
    padding-right: 0;
  }
}

.xl\:pr-0 {
  @media (min-width: breakpoints.$break-xl) {
    padding-right: 0;
  }
}

.sm\:pl-0 {
  @media (min-width: breakpoints.$break-sm) {
    padding-left: 0;
  }
}

.md\:pl-0 {
  @media (min-width: breakpoints.$break-md) {
    padding-left: 0;
  }
}

.lg\:pl-0 {
  @media (min-width: breakpoints.$break-lg) {
    padding-left: 0;
  }
}

.xl\:pl-0 {
  @media (min-width: breakpoints.$break-xl) {
    padding-left: 0;
  }
}

.sm\:pt-0 {
  @media (min-width: breakpoints.$break-sm) {
    padding-top: 0;
  }
}

.md\:pt-0 {
  @media (min-width: breakpoints.$break-md) {
    padding-top: 0;
  }
}

.lg\:pt-0 {
  @media (min-width: breakpoints.$break-lg) {
    padding-top: 0;
  }
}

.xl\:pt-0 {
  @media (min-width: breakpoints.$break-xl) {
    padding-top: 0;
  }
}

.sm\:pb-0 {
  @media (min-width: breakpoints.$break-sm) {
    padding-bottom: 0;
  }
}

.md\:pb-0 {
  @media (min-width: breakpoints.$break-md) {
    padding-bottom: 0;
  }
}

.lg\:pb-0 {
  @media (min-width: breakpoints.$break-lg) {
    padding-bottom: 0;
  }
}

.xl\:pb-0 {
  @media (min-width: breakpoints.$break-xl) {
    padding-bottom: 0;
  }
}

//////   @media (max-width: #{$break-sm - 1}) {

.smmax\:pb-0 {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    padding-bottom: 0;
  }
}

.mdmax\:pb-0 {
  @media (max-width: #{breakpoints.$break-md - 1}) {
    padding-bottom: 0;
  }
}

.lgmax\:pb-0 {
  @media (max-width: #{breakpoints.$break-lg - 1}) {
    padding-bottom: 0;
  }
}

.xlmax\:pb-0 {
  @media (max-width: #{breakpoints.$break-xl - 1}) {
    padding-bottom: 0;
  }
}

.smmax\:mb-0 {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    margin-bottom: 0;
  }
}

.mdmax\:mb-0 {
  @media (max-width: #{breakpoints.$break-md - 1}) {
    margin-bottom: 0;
  }
}

.lgmax\:mb-0 {
  @media (max-width: #{breakpoints.$break-lg - 1}) {
    margin-bottom: 0;
  }
}

.xlmax\:mb-0 {
  @media (max-width: #{breakpoints.$break-xl - 1}) {
    margin-bottom: 0;
  }
}

.smmax\:pt-0 {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    padding-top: 0;
  }
}

.mdmax\:pt-0 {
  @media (max-width: #{breakpoints.$break-md - 1}) {
    padding-top: 0;
  }
}

.lgmax\:pt-0 {
  @media (max-width: #{breakpoints.$break-lg - 1}) {
    padding-top: 0;
  }
}

.xlmax\:pt-0 {
  @media (max-width: #{breakpoints.$break-xl - 1}) {
    padding-top: 0;
  }
}

.smmax\:mt-0 {
  @media (max-width: #{breakpoints.$break-sm - 1}) {
    margin-top: 0;
  }
}

.mdmax\:mt-0 {
  @media (max-width: #{breakpoints.$break-md - 1}) {
    margin-top: 0;
  }
}

.lgmax\:mt-0 {
  @media (max-width: #{breakpoints.$break-lg - 1}) {
    margin-top: 0;
  }
}

.xlmax\:mt-0 {
  @media (max-width: #{breakpoints.$break-xl - 1}) {
    margin-top: 0;
  }
}