@import "../ui.vars.less";

// 1rem  = 16px
// margin attributes
[less-space-after] {
    margin-right: @spacing-xxs;
}

[space-after] {
    margin-right: @spacing-s;
}

[more-space-after] {
    margin-right: @spacing-xl;
}

[less-space-before] {
    margin-left: @spacing-xxs;
}

[space-before] {
    margin-left: @spacing-s;
}

[more-space-before] {
    margin-left: @spacing-xl;
}

[mobile-space-before] {
    @media only screen and (max-width: @mobile-landscape) {
        margin-left: @spacing-m;
    }
}

[mobile-space-after] {
    @media only screen and (max-width: @mobile-landscape) {
        margin-right: @spacing-m;
    }
}

[mobile-space-above] {
  @media only screen and (max-width: @mobile-landscape) {
      margin-top: @spacing-s;
  }
}

[mobile-space-below] {
  @media only screen and (max-width: @mobile-landscape) {
      margin-bottom: @spacing-s;
  }
}

[mobile-less-space-above] {
  @media only screen and (max-width: @mobile-landscape) {
      margin-top: @spacing-xs;
  }
}

[mobile-more-space-above] {
  @media only screen and (max-width: @mobile-landscape) {
      margin-top: @spacing-xl;
  }
}

[landscape-less-space-above] {
    @media only screen and (max-width: @landscape) {
        margin-top: @spacing-xs;
    }
}

[space-around] {
    margin: 0 @spacing-s;
}

[more-space-around] {
    margin: @spacing-xl;
}

[less-space-above] {
    margin-top: @spacing-xs;
}

[less-space-below] {
    margin-bottom: @spacing-xs;
}

[space-surround] {
    margin: @spacing-s;
}

[more-space-surround] {
    margin: @spacing-m;
}

[space-above] {
    margin-top: @spacing-s;
}

[space-below] {
    margin-bottom: @spacing-s;
}

[more-space-above] {
    margin-top: @spacing-xl;
}

[more-space-below] {
    margin-bottom: @spacing-xl;
}

[space-above-below] {
    margin: @spacing-s 0;
}

[nudge-up] {
    margin-top: -10px;
}

[nudge-up-more] {
    margin-top: -25px;
}

[nudge-down] {
    margin-top: 3px;
}


// padding attributes
[padding-top-bottom] {
    padding: @spacing-m  0;
}

[padding] {
    padding: @spacing-m;
}

[no-padding] {
    padding: 0 !important;
}

[no-padding-top] {
    padding-top: 0 !important;
}

[padding-top] {
    padding-top: @spacing-m;
}

[padding-bottom] {
    padding-bottom: @spacing-m;
}

[padding-left] {
    padding-left: @spacing-m;
}

[more-padding-left] {
    padding-left: @spacing-xl;
}

[padding-right] {
    padding-right: @spacing-m;
}

[more-padding-right] {
    padding-right: @spacing-xl;
}

[less-padding] {
    padding: @spacing-xs;
}

[less-padding-bottom] {
    padding-bottom: @spacing-xs;
}

[less-padding-top] {
    padding-top: @spacing-xs;
}

[less-padding-right] {
    padding-right: @spacing-xs;
}

[less-padding-left] {
    padding-left: @spacing-xs;
}

[more-padding-bottom]{
    padding-bottom: @spacing-xl;
}

[more-padding-top] {
    padding-top: @spacing-xl;
}

[more-padding] {
    padding: @spacing-xl;
}

[mobile-less-padding] {
    @media screen and (max-width: @mobile) {
        padding-left: @spacing-m;
        padding-right: @spacing-m;
    }
}

[mobile-padding-top] {
    @media screen and (max-width: @mobile) {
        padding-top: @spacing-xl;
    }
}

[mobile-less-padding-top] {
    @media screen and (max-width: @mobile) {
        padding-top: @spacing-m;
    }
}

[mobile-less-padding-bottom] {
    @media screen and (max-width: @mobile) {
        padding-bottom: @spacing-m;
    }
}

[mobile-padding-bottom] {
    @media screen and (max-width: @mobile) {
        padding-bottom: @spacing-xl;
    }
}

[mobile-no-padding] {
    @media screen and (max-width: @mobile) {
        padding: 0px;
    }
}