@import '../settings/variables';

.u-position {
  &--relative {
    position: relative;
  }

  &--absolute {
    position: absolute;
  }

  &--bottom {
    bottom: 0;
  }

  &--left {
    left: 0;
  }

  &--top {
    top: 0;
  }

  &--right {
    right: 0;
  }

  &--center {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  &--horizontal-center {
    left: 50%;
    transform: translateX(-50%);
  }

  &--vertical-center {
    top: 50%;
    transform: translateY(-50%);
  }

  &--above {
    top: auto;
    bottom: 100%;
  }

  &--below {
    top: 100%;
    bottom: auto;
  }
}