appwrite/public/styles/functions.less

.padding {
  padding: 30px;
}

.padding-top {
  padding-top: 30px!important;
}

.padding-top-large {
  padding-top: 50px!important;
}

.padding-top-xl {
  padding-top: 80px!important;
}

.padding-bottom {
  padding-bottom: 30px!important;
}

.padding-bottom-large {
  padding-bottom: 50px!important;
}

.padding-bottom-xl {
  padding-bottom: 80px!important;
}

.margin-end {
  .func-margin-end(20px)!important;
}

.margin-start {
  .func-margin-start(20px)!important;
}

.margin-end-small {
  .func-margin-end(10px)!important;
}

.margin-start-small {
  .func-margin-start(10px)!important;
}

.margin-end-large {
  .func-margin-end(50px)!important;
}

.margin-start-large {
  .func-margin-start(50px)!important;
}

.margin-end-no {
  .func-margin-end(0)!important;
}

.margin-start-no {
  .func-margin-start(0)!important;
}

.margin-end-negative {
  .func-margin-end(-30px)!important;
}

.margin-start-negative {
  .func-margin-start(-30px)!important;
}

.margin-end-negative-small {
  .func-margin-end(-15px)!important;
}

.margin-start-negative-small {
  .func-margin-start(-15px)!important;
}

.margin-end-negative-tiny {
  .func-margin-end(-5px)!important;
}

.margin-start-negative-tiny {
  .func-margin-start(-5px)!important;
}

.margin-top {
  margin-top: 30px!important;
}

.margin-bottom {
  margin-bottom: 30px!important;
}

.margin-top-no {
  margin-top: 0!important;
}

.margin-bottom-no {
  margin-bottom: 0!important;
}

.margin-top-xxl {
  margin-top: 140px!important;
}

.margin-top-xl {
  margin-top: 80px!important;
}

.margin-top-large {
  margin-top: 50px!important;
}

.margin-top-small {
  margin-top: 15px!important;
}

.margin-top-tiny {
  margin-top: 5px!important;
}

.margin-top-negative {
  margin-top: -30px!important;
}

.margin-top-negative-tiny {
  margin-top: -5px!important;
}

.margin-top-negative-small {
  margin-top: -15px!important;
}

.margin-top-negative-large {
  margin-top: -50px!important;
}

.margin-top-negative-xl {
  margin-top: -80px!important;
}

.margin-top-negative-xxl {
  margin-top: -100px!important;
}

.margin-top-negative-xxxl {
  margin-top: -150px!important;
}

.margin-bottom-xxl {
  margin-bottom: 140px!important;
}

.margin-bottom-xl {
  margin-bottom: 80px!important;
}

.margin-bottom-large {
  margin-bottom: 50px!important;
}

.margin-bottom-small {
  margin-bottom: 15px!important;
}

.margin-bottom-tiny {
  margin-bottom: 5px!important;
}

.margin-bottom-negative {
  margin-bottom: -30px!important;
}

.margin-bottom-negative-tiny {
  margin-bottom: -5px!important;
}

.margin-bottom-negative-small {
  margin-bottom: -15px!important;
}

.margin-bottom-negative-large {
  margin-bottom: -50px!important;
}

.margin-bottom-negative-xl {
  margin-bottom: -80px!important;
}

.margin-bottom-negative-xl {
  margin-bottom: -100px!important;
}

.force-left {
  direction: ltr;
  text-align: left;
}

.force-right {
  direction: rtl;
  text-align: right;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.func-rotate(@value) {
  -webkit-transform: rotate(@value);
  -moz-transform: rotate(@value);
  -o-transform: rotate(@value);
  -ms-transform: rotate(@value);
  transform: rotate(@value);
}

.ratio-wide {
  height: 0;
  overflow: hidden;
  padding-top: 56%;
  position: relative;
  width: 100%;

  & > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.ratio-square {
  height: 0;
  overflow: hidden;
  padding-top: 56%;
  position: relative;
  width: 100%;

  & > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.clear {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}