WeAreGenki/minna-ui

/**
* POSITION
*/

.pos-f { position: fixed; }
.pos-a { position: absolute; }
.pos-r { position: relative; }
.pos-s { position: static; }
.pos-i { position: initial; } /* default */

/* Direction */

/**
* TODO: If we never use anything other than .t0, .r0, .b0, l0 then remove
* the other steps here.
*/

@each $value $i in $spacing-values {
  .t$(i) { top: $value; }
  .r$(i) { right: $value; }
  .b$(i) { bottom: $value; }
  .l$(i) { left: $value; }

  .a$(i) {
    top: $value;
    right: $value;
    bottom: $value;
    left: $value;
  }

  @each $bp in $breakpoints {
    @media $($bp) {
      .$(bp)-t$(i) { top: $value; }
      .$(bp)-r$(i) { right: $value; }
      .$(bp)-b$(i) { bottom: $value; }
      .$(bp)-l$(i) { left: $value; }

      .$(bp)-a$(i) {
        top: $value;
        right: $value;
        bottom: $value;
        left: $value;
      }
    }
  }
}

.t-unset { top: unset; }
.r-unset { right: unset; }
.b-unset { bottom: unset; }
.l-unset { left: unset; }

.a-unset {
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
}

/* stylelint-disable declaration-no-important */
.t-unset-i { top: unset !important; }
.r-unset-i { right: unset !important; }
.b-unset-i { bottom: unset !important; }
.l-unset-i { left: unset !important; }

.a-unset-i {
  top: unset !important;
  right: unset !important;
  bottom: unset !important;
  left: unset !important;
}
/* stylelint-enable */