/*
 * ------------------------------
 * Padding et margin
 * ------------------------------
 */
// Les dimensions suivantes suivent les normes de Material Design, mais ne sont pas incluses dans Angular Material
$layout-spacing-sizes: 0 4 8 12 16 24 32 40 48;

$layout-sides: (
  t: top,
  r: right,
  b: bottom,
  l: left
);

@each $size in $layout-spacing-sizes {
  @each $shortSide, $side in $layout-sides {
    .m-#{$shortSide}-#{$size} {
      margin-#{$side}: #{$size}px !important;
    }
    .m-#{$shortSide}-#{$size}-neg {
      margin-#{$side}: -#{$size}px !important;
    }
    .p-#{$shortSide}-#{$size} {
      padding-#{$side}: #{$size}px !important;
    }
  }

  .m-#{$size} {
    margin: #{$size}px !important;
  }
  .m-#{$size}-neg {
    margin: -#{$size}px !important;
  }

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

  .m-h-#{$size} {
    margin-left: #{$size}px !important;
    margin-right: #{$size}px !important;
  }

  .m-h-#{$size}-neg {
    margin-left: -#{$size}px !important;
    margin-right: -#{$size}px !important;
  }

  .m-v-#{$size} {
    margin-top: #{$size}px !important;
    margin-bottom: #{$size}px !important;
  }

  .m-v-#{$size}-neg {
    margin-top: -#{$size}px !important;
    margin-bottom: -#{$size}px !important;
  }

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

  .p-v-#{$size} {
    padding-top: #{$size}px !important;
    padding-bottom: #{$size}px !important;
  }
}

.flex {
  display: flex;

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-wrap {
    flex-wrap: wrap !important;
  }
}

.align-items {
  &-center {
    align-items: center;
  }
  &-end {
    align-items: flex-end;
  }
  &-start {
    align-items: start;
  }
}

.align-self {
  &-center {
    align-self: center;
  }
  &-end {
    align-self: flex-end;
  }
  &-start {
    align-self: start;
  }
}

.justify-content {
  &-center {
    justify-content: center;
  }
  &-end {
    justify-content: flex-end;
  }
  &-start {
    justify-content: start;
  }
  &-space-between {
    justify-content: space-between;
  }
}

.d {
  &-block {
    display: block;
  }

  &-none {
    display: none;
  }
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.overflow {
  &-y-auto {
    overflow-y: auto;
  }
  &-y-hidden {
    overflow-y: hidden;
  }
  &-x-auto {
    overflow-x: auto;
  }
  &-x-hidden {
    overflow-x: hidden;
  }
  &-auto {
    overflow: auto;
  }
  &-hidden {
    overflow: hidden;
  }
}