$_sizesBreaks: xl, lg, md, sm;

$sizes:
  0, 3, 5, 8, 10, 12, 15, 20, 25, 30, 35, 40, 45, 50, 60, 80, 90,
;

@each $size in $sizes {
  .py-#{$size} {
    padding-top: #{$size}px !important;
    padding-bottom: #{$size}px !important;
  }

  .px-#{$size} {
    padding-left: #{$size}px !important;
    padding-right: #{$size}px !important;
  }

  .pt-#{$size} { padding-top: #{$size}px !important; }
  .pb-#{$size} { padding-bottom: #{$size}px !important ; }
  .pl-#{$size} { padding-left: #{$size}px !important ; }
  .pr-#{$size} { padding-right: #{$size}px !important; }
  .mt-#{$size} { margin-top: #{$size}px !important; }
  .mb-#{$size} { margin-bottom: #{$size}px !important; }
  .ml-#{$size} { margin-left: #{$size}px !important; }
  .mr-#{$size} { margin-right: #{$size}px !important ; }
}

@each $break in $_sizesBreaks {
  @include media-down($break) {
    @each $size in $sizes {
      .#{$break}\:py-#{$size} {
        padding-top: #{$size}px !important;
        padding-bottom: #{$size}px !important;
      }
    
      .#{$break}\:px-#{$size} {
        padding-left: #{$size}px !important;
        padding-right: #{$size}px !important;
      }
    
      .#{$break}\:pt-#{$size} { padding-top: #{$size}px !important; }
      .#{$break}\:pb-#{$size} { padding-bottom: #{$size}px !important; }
      .#{$break}\:pl-#{$size} { padding-left: #{$size}px !important; }
      .#{$break}\:pr-#{$size} { padding-right: #{$size}px !important; }
      .#{$break}\:mt-#{$size} { margin-top: #{$size}px !important; }
      .#{$break}\:mb-#{$size} { margin-bottom: #{$size}px !important; }
      .#{$break}\:ml-#{$size} { margin-left: #{$size}px !important; }
      .#{$break}\:mr-#{$size} { margin-right: #{$size}px !important; }
    }
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

@each $break in $_sizesBreaks {
  .#{$break}\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
}


$gap-sizes-media: md, sm;
$gap-sizes: 5, 10, 15, 20, 30, 40, 50, 60;

@each $gap in $gap-sizes {
  .x-gap {
    &-#{$gap} {
      margin-left: -#{$gap / 2}px;
      margin-right: -#{$gap / 2}px;
    
      > * {
        padding-left: #{$gap / 2}px;
        padding-right: #{$gap / 2}px;
      }
    }
  }

  .y-gap {
    &-#{$gap} {
      margin-top: -#{$gap / 2}px;
      margin-bottom: -#{$gap / 2}px;
    
      > * {
        padding-top: #{$gap / 2}px;
        padding-bottom: #{$gap / 2}px;
      }
    }
  }
}

@each $media in $gap-sizes-media {
  @include media-down(md) {
    @each $gap in $gap-sizes {
      .#{$media}\:x-gap {
        &-#{$gap} {
          margin-left: -#{$gap / 2}px;
          margin-right: -#{$gap / 2}px;
        
          > * {
            padding-left: #{$gap / 2}px;
            padding-right: #{$gap / 2}px;
          }
        }
      }
    
      .#{$media}\:y-gap {
        &-#{$gap} {
          margin-top: -#{$gap / 2}px;
          margin-bottom: -#{$gap / 2}px;
        
          > * {
            padding-top: #{$gap / 2}px;
            padding-bottom: #{$gap / 2}px;
          }
        }
      }
    }
  }
}

$layout-sizes: (
  "sm": 30,
  "md": 60,
  "lg": 120,
  "xl": 140,
);

$layout-sizes-md: (
  "sm": 30,
  "md": 60,
  "lg": 100,
  "xl": 120,
);

$layout-sizes-sm: (
  "sm": 30,
  "md": 50,
  "lg": 80,
  "xl": 80,
);

@each $media, $size in $layout-sizes {
  .layout-pt-#{$media} {
    padding-top: #{$size}px;
  }

  .layout-pb-#{$media} {
    padding-bottom: #{$size}px;
  }
}

@each $media, $size in $layout-sizes-md {
  @include media-down(md) {
    .layout-pt-#{$media} {
      padding-top: #{$size}px;
    }
  
    .layout-pb-#{$media} {
      padding-bottom: #{$size}px;
    }
  }
}

@each $media, $size in $layout-sizes-sm {
  @include media-down(sm) {
    .layout-pt-#{$media} {
      padding-top: #{$size}px;
    }
  
    .layout-pb-#{$media} {
      padding-bottom: #{$size}px;
    }
  }
}


.w-1\/7 { width: 14.285714% !important; }
.w-1\/5 { width: 20% !important; }
.w-1\/4 { width: 25% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-1\/2 { width: 50% !important; }
.w-1\/1 { width: 100% !important; }

@each $break in $_sizesBreaks {
  @include media-down($break) {
    .#{$break}\:w-1\/5 { width: 20% !important; }
    .#{$break}\:w-1\/4 { width: 25% !important; }
    .#{$break}\:w-1\/3 { width: 33.333333% !important; }
    .#{$break}\:w-1\/2 { width: 50% !important; }
    .#{$break}\:w-1\/1 { width: 100% !important; }
  }
}

.flex-column { flex-direction: column; }

@each $break in $_sizesBreaks {
  @include media-down($break) {
    .#{$break}\:flex-column { flex-direction: column !important; }
  }
}

.text {
  &-center { text-align: center; }
  &-right { text-align: right; }
  &-left { text-align: left; }
}

@each $break in $_sizesBreaks {
  @include media-down($break) {
    .#{$break}\:text {
      &-center { text-align: center !important; }
      &-right { text-align: right !important; }
      &-left { text-align: left !important; }
    }
  }
}


.justify-start   { justify-content: flex-start !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.items-start     { align-items: flex-start !important; }
.items-end       { align-items: flex-end !important; }
.items-center    { align-items: center !important; }

@each $break in $_sizesBreaks {
  @include media-down($break) {
    .#{$break}\:justify-start   { justify-content: flex-start !important; }
    .#{$break}\:justify-end     { justify-content: flex-end !important; }
    .#{$break}\:justify-center  { justify-content: center !important; }
    .#{$break}\:justify-between { justify-content: space-between !important; }
    .#{$break}\:items-start     { align-items: flex-start !important; }
    .#{$break}\:items-end       { align-items: flex-end !important; }
    .#{$break}\:items-center    { align-items: center !important; }
  }
}


.d-none         { display: none !important; }
.d-flex         { display: flex !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }

$_displays: none, inline-block, block, flex;

@each $break in $_sizesBreaks {
  @include media-down($break) {
    @each $value in $_displays {
      .#{$break}\:d-#{$value} { display: $value !important; }
    }
  }
}


.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }

@each $break in $_sizesBreaks {
  @include media-down($break) {
    .#{$break}\:order-1 { order: 1; }
    .#{$break}\:order-2 { order: 2; }
    .#{$break}\:order-3 { order: 3; }
    .#{$break}\:order-4 { order: 4; }
    .#{$break}\:order-5 { order: 5; }
    .#{$break}\:order-6 { order: 6; }
  }
}