@import '../quasar.variables.scss';

/**
 *  margin padding
 *  use: m-10 m-l-10 m-p-10
 */

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

@for $size from 1 through 1000 {
  .m-#{$size},
  .margin-#{$size} {
    margin: #{$size}px;
  }
  @if $size >= 0 {
    .p-#{$size},
    .padding-#{$size} {
      padding: #{$size}px;
    }
  }
}

@for $size from 0 through 1000 {
  .m-h-#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  .m-v-#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  @if $size >= 0 {
    .p-h-#{$size} {
      padding-left: #{$size}px;
      padding-right: #{$size}px;
    }
    .p-v-#{$size} {
      padding-top: #{$size}px;
      padding-bottom: #{$size}px;
    }
  }
}

@for $size from 1 through 1000 {
  .m-x-#{$size},
  .margin-x-#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  @if $size >= 0 {
    .p-x-#{$size},
    .padding-x-#{$size} {
      padding-left: #{$size}px;
      padding-right: #{$size}px;
    }
  }
  .m-y-#{$size},
  .margin-y-#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  @if $size >= 0 {
    .p-y-#{$size},
    .padding-y-#{$size} {
      padding-top: #{$size}px;
      padding-bottom: #{$size}px;
    }
  }
}

@for $size from 0 through 1000 {
  .left-#{$size} {
    left: #{$size}px;
  }
  .right-#{$size} {
    right: #{$size}px;
  }
  .top-#{$size} {
    top: #{$size}px;
  }
  .bottom-#{$size} {
    bottom: #{$size}px;
  }
}
@for $size from 0 through 1000 {
  .b-r-#{$size} {
    border-radius: #{$size}px;
  }
}
@each $position in bottom, top, left, right {
  .b-#{$position} {
    border-#{$position}: solid 1px var(--my-grey-9);
  }
}

@for $size from 0 through 1000 {
  @each $side in top right bottom left {
    .m-#{str-slice($side, 0, 1)}-#{$size} {
      margin-#{$side}: #{$size}px;
    }
    @if $size >= 0 {
      .p-#{str-slice($side, 0, 1)}-#{$size} {
        padding-#{$side}: #{$size}px;
      }
    }
  }
}

@for $size from 1 through 10 {
  @each $side in left right top bottom {
    .m-#{str-slice($side, 0, 1)}-#{$size}vw {
      margin-#{$side}: #{$size}vw;
    }
    .p-#{str-slice($side, 0, 1)}-#{$size}vw {
      padding-#{$side}: #{$size}vw;
    }
  }
  @each $side in left right top bottom {
    .m-#{str-slice($side, 0, 1)}-#{$size}vh {
      margin-#{$side}: #{$size}vh;
    }
    .p-#{str-slice($side, 0, 1)}-#{$size}vh {
      padding-#{$side}: #{$size}vh;
    }
  }
}
