// Transition mixin

@mixin transEase(
  $property: all,
  $duration: 0.3s,
  $timing: ease-out,
  $delay: 0s
) {
  transition: $property $duration $timing $delay;
}

@for $i from 0 through 300 {
  @if $i % 1 == 0 {
    .w-#{$i}px {
      width: #{$i}px;
    }
    .h-#{$i}px {
      height: #{$i}px;
    }
    .max-w-#{$i}px {
      max-width: #{$i}px;
    }
    .min-w-#{$i}px {
      min-width: #{$i}px;
    }
    .max-h-#{$i}px {
      max-height: #{$i}px;
    }
    .min-h-#{$i}px {
      min-height: #{$i}px;
    }

    // Breakpoints
    @media screen and (min-width: 1600px) {
      .w-xxl-#{$i}px {
        width: #{$i}px;
      }
      .h-xxl-#{$i}px {
        height: #{$i}px;
      }
    }

    @media screen and (min-width: 1400px) {
      .w-xl-#{$i}px {
        width: #{$i}px;
      }
      .h-xl-#{$i}px {
        height: #{$i}px;
      }
    }

    @media screen and (min-width: 1200px) {
      .w-lg-#{$i}px {
        width: #{$i}px;
      }
      .h-lg-#{$i}px {
        height: #{$i}px;
      }
    }

    @media screen and (min-width: 992px) {
      .w-md-#{$i}px {
        width: #{$i}px;
      }
      .h-md-#{$i}px {
        height: #{$i}px;
      }
    }

    @media screen and (min-width: 768px) {
      .w-sm-#{$i}px {
        width: #{$i}px;
      }
      .h-sm-#{$i}px {
        height: #{$i}px;
      }
    }
  }
}

@for $i from 1 through 300 {
  .p-#{$i}px {
    padding: #{$i}px;
  }
  .px-#{$i}px {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  .py-#{$i}px {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  .pt-#{$i}px {
    padding-top: #{$i}px;
  }
  .pb-#{$i}px {
    padding-bottom: #{$i}px;
  }
  .ps-#{$i}px {
    padding-left: #{$i}px;
  }
  .pe-#{$i}px {
    padding-right: #{$i}px;
  }
  .m-#{$i}px {
    margin: #{$i}px;
  }
  .mx-#{$i}px {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .my-#{$i}px {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .mt-#{$i}px {
    margin-top: #{$i}px;
  }
  .mb-#{$i}px {
    margin-bottom: #{$i}px;
  }
  .ms-#{$i}px {
    margin-left: #{$i}px;
  }
  .me-#{$i}px {
    margin-right: #{$i}px;
  }

  @media screen and (min-width: 1600px) {
    .w-xxl-#{$i}px {
      width: #{$i}px;
      min-width: #{$i}px;
      max-width: #{$i}px;
    }
    .h-xxl-#{$i}px {
      height: #{$i}px;
      min-height: #{$i}px;
      max-height: #{$i}px;
    }
    .p-xxl-#{$i}px {
      padding: #{$i}px;
    }
    .px-xxl-#{$i}px {
      padding-left: #{$i}px;
      padding-right: #{$i}px;
    }
    .py-xxl-#{$i}px {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pt-xxl-#{$i}px {
      padding-top: #{$i}px;
    }
    .pb-xxl-#{$i}px {
      padding-bottom: #{$i}px;
    }
    .ps-xxl-#{$i}px {
      padding-left: #{$i}px;
    }
    .pe-xxl-#{$i}px {
      padding-right: #{$i}px;
    }
    .mx-xxl-#{$i}px {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
    .my-xxl-#{$i}px {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mt-xxl-#{$i}px {
      margin-top: #{$i}px;
    }
    .mb-xxl-#{$i}px {
      margin-bottom: #{$i}px;
    }
    .ms-xxl-#{$i}px {
      margin-left: #{$i}px;
    }
    .me-xxl-#{$i}px {
      margin-right: #{$i}px;
    }
  }

  @media screen and (min-width: 1400px) {
    .w-xl-#{$i}px {
      width: #{$i}px;
      min-width: #{$i}px;
      max-width: #{$i}px;
    }
    .h-xl-#{$i}px {
      height: #{$i}px;
      min-height: #{$i}px;
      max-height: #{$i}px;
    }
    .p-xl-#{$i}px {
      padding: #{$i}px;
    }
    .px-xl-#{$i}px {
      padding-left: #{$i}px;
      padding-right: #{$i}px;
    }
    .py-xl-#{$i}px {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pt-xl-#{$i}px {
      padding-top: #{$i}px;
    }
    .pb-xl-#{$i}px {
      padding-bottom: #{$i}px;
    }
    .ps-xl-#{$i}px {
      padding-left: #{$i}px;
    }
    .pe-xl-#{$i}px {
      padding-right: #{$i}px;
    }
    .mx-xl-#{$i}px {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
    .my-xl-#{$i}px {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mt-xl-#{$i}px {
      margin-top: #{$i}px;
    }
    .mb-xl-#{$i}px {
      margin-bottom: #{$i}px;
    }
    .ms-xl-#{$i}px {
      margin-left: #{$i}px;
    }
    .me-xl-#{$i}px {
      margin-right: #{$i}px;
    }
  }

  @media screen and (min-width: 1200px) {
    .w-lg-#{$i}px {
      width: #{$i}px;
      min-width: #{$i}px;
      max-width: #{$i}px;
    }
    .h-lg-#{$i}px {
      height: #{$i}px;
      min-height: #{$i}px;
      max-height: #{$i}px;
    }
    .p-lg-#{$i}px {
      padding: #{$i}px;
    }
    .px-lg-#{$i}px {
      padding-left: #{$i}px;
      padding-right: #{$i}px;
    }
    .py-lg-#{$i}px {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pt-lg-#{$i}px {
      padding-top: #{$i}px;
    }
    .pb-lg-#{$i}px {
      padding-bottom: #{$i}px;
    }
    .ps-lg-#{$i}px {
      padding-left: #{$i}px;
    }
    .pe-lg-#{$i}px {
      padding-right: #{$i}px;
    }
    .mx-lg-#{$i}px {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
    .my-lg-#{$i}px {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mt-lg-#{$i}px {
      margin-top: #{$i}px;
    }
    .mb-lg-#{$i}px {
      margin-bottom: #{$i}px;
    }
    .ms-lg-#{$i}px {
      margin-left: #{$i}px;
    }
    .me-lg-#{$i}px {
      margin-right: #{$i}px;
    }
  }

  @media screen and (min-width: 992px) {
    .w-md-#{$i}px {
      width: #{$i}px;
      min-width: #{$i}px;
      max-width: #{$i}px;
    }
    .h-md-#{$i}px {
      height: #{$i}px;
      min-height: #{$i}px;
      max-height: #{$i}px;
    }
    .p-md-#{$i}px {
      padding: #{$i}px;
    }
    .px-md-#{$i}px {
      padding-left: #{$i}px;
      padding-right: #{$i}px;
    }
    .py-md-#{$i}px {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pt-md-#{$i}px {
      padding-top: #{$i}px;
    }
    .pb-md-#{$i}px {
      padding-bottom: #{$i}px;
    }
    .ps-md-#{$i}px {
      padding-left: #{$i}px;
    }
    .pe-md-#{$i}px {
      padding-right: #{$i}px;
    }
    .mx-md-#{$i}px {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
    .my-md-#{$i}px {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mt-md-#{$i}px {
      margin-top: #{$i}px;
    }
    .mb-md-#{$i}px {
      margin-bottom: #{$i}px;
    }
    .ms-md-#{$i}px {
      margin-left: #{$i}px;
    }
    .me-md-#{$i}px {
      margin-right: #{$i}px;
    }
  }

  @media screen and (min-width: 768px) {
    .w-sm-#{$i}px {
      width: #{$i}px;
      min-width: #{$i}px;
      max-width: #{$i}px;
    }
    .h-sm-#{$i}px {
      height: #{$i}px;
      min-height: #{$i}px;
      max-height: #{$i}px;
    }
    .p-sm-#{$i}px {
      padding: #{$i}px;
    }
    .px-sm-#{$i}px {
      padding-left: #{$i}px;
      padding-right: #{$i}px;
    }
    .py-sm#{$i}px {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pt-sm-#{$i}px {
      padding-top: #{$i}px;
    }
    .pb-sm#{$i}px {
      padding-bottom: #{$i}px;
    }
    .ps-sm-#{$i}px {
      padding-left: #{$i}px;
    }
    .pe-sm-#{$i}px {
      padding-right: #{$i}px;
    }
    .mx-sm-#{$i}px {
      margin-left: #{$i}px;
      margin-right: #{$i}px;
    }
    .my-sm-#{$i}px {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mt-sm-#{$i}px {
      margin-top: #{$i}px;
    }
    .mb-sm-#{$i}px {
      margin-bottom: #{$i}px;
    }
    .ms-sm-#{$i}px {
      margin-left: #{$i}px;
    }
    .me-sm-#{$i}px {
      margin-right: #{$i}px;
    }
  }
}

@mixin media-min-query($breakpoint) {
  @if $breakpoint == "sm" {
    @media (min-width: 576px) {
      @content;
    }
  } @else if $breakpoint == "md" {
    @media (min-width: 768px) {
      @content;
    }
  } @else if $breakpoint == "lg" {
    @media (min-width: 992px) {
      @content;
    }
  } @else if $breakpoint == "xl" {
    @media (min-width: 1200px) {
      @content;
    }
  } @else if $breakpoint == "xxl" {
    @media (min-width: 1400px) {
      @content;
    }
  }
}

@mixin media-max-query($breakpoint) {
  @if $breakpoint == "sm" {
    @media (max-width: 575px) {
      @content;
    }
  } @else if $breakpoint == "md" {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $breakpoint == "lg" {
    @media (max-width: 991px) {
      @content;
    }
  } @else if $breakpoint == "xl" {
    @media (max-width: 1199px) {
      @content;
    }
  } @else if $breakpoint == "xxl" {
    @media (max-width: 1399px) {
      @content;
    }
  }
}

@mixin border($width: 1px, $style: solid, $color: #000) {
  border: $width $style $color;
}
