@use 'sass:map';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins';

.container,
.container-fluid:not(.container-fluid--width-100) {
  position: relative;

  .container,
  .container-fluid {
    padding: 0 !important;
  }
}

.container-fluid {
  max-width: map.get($container-max-widths, xl);
  position: relative;

  &--md {
    max-width: map.get($container-max-widths, md);
  }

  &--half {
    max-width: calc(map.get($container-max-widths, xl) / 2);
  }
}

.container-fluid.container-fluid--width-100 {
  max-width: 100%;
  padding: 0 !important;
  overflow: hidden;
}

/* Container padding */
@each $grid-breakpoint, $container-padding in $container-paddings {
  @include mixins.media-breakpoint-up($grid-breakpoint) {
    $grid-gutter-half-width: calc($grid-gutter-width / 2);
    .container {
      padding-right: $container-padding !important;
      padding-left: $container-padding !important;
    }
    .container-fluid {
      padding-right: $container-padding !important;
      padding-left: $container-padding !important;
    }
  }
}

/* Bootstrap widths */
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: map.get($grid-breakpoints, 'sm')) {
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-25 {
    width: 25% !important;
  }
  .h-sm-100 {
    height: 100% !important;
  }
  .h-sm-75 {
    height: 75% !important;
  }
  .h-sm-50 {
    height: 50% !important;
  }
  .h-sm-25 {
    height: 25% !important;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: map.get($grid-breakpoints, 'md')) {
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-25 {
    width: 25% !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .h-md-75 {
    height: 75% !important;
  }
  .h-md-50 {
    height: 50% !important;
  }
  .h-md-25 {
    height: 25% !important;
  }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: map.get($grid-breakpoints, 'l')) {
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-25 {
    width: 25% !important;
  }
  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-75 {
    height: 75% !important;
  }
  .h-lg-50 {
    height: 50% !important;
  }
  .h-lg-25 {
    height: 25% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: map.get($grid-breakpoints, 'xl')) {
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-25 {
    width: 25% !important;
  }
  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-75 {
    height: 75% !important;
  }
  .h-xl-50 {
    height: 50% !important;
  }
  .h-xl-25 {
    height: 25% !important;
  }
}