@margin-prefix-cls: ~'@{clinia-prefix}-margin';
/* ========================================================================
   Component: Margin
 ========================================================================== */
@margin-margin: @global-margin;
@margin-small-margin: @global-small-margin;
@margin-medium-margin: @global-medium-margin;
@margin-large-margin: @global-medium-margin;
@margin-large-margin-l: @global-large-margin;
@margin-xlarge-margin: @global-large-margin;
@margin-xlarge-margin-l: @global-xlarge-margin;

/* ========================================================================
   Component: Margin
 ========================================================================== */

/*
 * Default
 */

.@{margin-prefix-cls} {
  margin-bottom: @margin-margin;
}
* + .@{margin-prefix-cls} {
  margin-top: @margin-margin !important;
}

.@{margin-prefix-cls}-top {
  margin-top: @margin-margin !important;
}
.@{margin-prefix-cls}-bottom {
  margin-bottom: @margin-margin !important;
}
.@{margin-prefix-cls}-left {
  margin-left: @margin-margin !important;
}
.@{margin-prefix-cls}-right {
  margin-right: @margin-margin !important;
}

/* Small
 ========================================================================== */

.@{margin-prefix-cls}-small {
  margin-bottom: @margin-small-margin;
}
* + .@{margin-prefix-cls}-small {
  margin-top: @margin-small-margin !important;
}

.@{margin-prefix-cls}-small-top {
  margin-top: @margin-small-margin !important;
}
.@{margin-prefix-cls}-small-bottom {
  margin-bottom: @margin-small-margin !important;
}
.@{margin-prefix-cls}-small-left {
  margin-left: @margin-small-margin !important;
}
.@{margin-prefix-cls}-small-right {
  margin-right: @margin-small-margin !important;
}

/* Medium
 ========================================================================== */

.@{margin-prefix-cls}-medium {
  margin-bottom: @margin-medium-margin;
}
* + .@{margin-prefix-cls}-medium {
  margin-top: @margin-medium-margin !important;
}

.@{margin-prefix-cls}-medium-top {
  margin-top: @margin-medium-margin !important;
}
.@{margin-prefix-cls}-medium-bottom {
  margin-bottom: @margin-medium-margin !important;
}
.@{margin-prefix-cls}-medium-left {
  margin-left: @margin-medium-margin !important;
}
.@{margin-prefix-cls}-medium-right {
  margin-right: @margin-medium-margin !important;
}

/* Large
 ========================================================================== */

.@{margin-prefix-cls}-large {
  margin-bottom: @margin-large-margin;
}
* + .@{margin-prefix-cls}-large {
  margin-top: @margin-large-margin !important;
}

.@{margin-prefix-cls}-large-top {
  margin-top: @margin-large-margin !important;
}
.@{margin-prefix-cls}-large-bottom {
  margin-bottom: @margin-large-margin !important;
}
.@{margin-prefix-cls}-large-left {
  margin-left: @margin-large-margin !important;
}
.@{margin-prefix-cls}-large-right {
  margin-right: @margin-large-margin !important;
}

/* Desktop and bigger */
@media (min-width: @screen-lg) {
  .@{margin-prefix-cls}-large {
    margin-bottom: @margin-large-margin-l;
  }
  * + .@{margin-prefix-cls}-large {
    margin-top: @margin-large-margin-l !important;
  }

  .@{margin-prefix-cls}-large-top {
    margin-top: @margin-large-margin-l !important;
  }
  .@{margin-prefix-cls}-large-bottom {
    margin-bottom: @margin-large-margin-l !important;
  }
  .@{margin-prefix-cls}-large-left {
    margin-left: @margin-large-margin-l !important;
  }
  .@{margin-prefix-cls}-large-right {
    margin-right: @margin-large-margin-l !important;
  }
}

/* XLarge
 ========================================================================== */

.@{margin-prefix-cls}-xlarge {
  margin-bottom: @margin-xlarge-margin;
}
* + .@{margin-prefix-cls}-xlarge {
  margin-top: @margin-xlarge-margin !important;
}

.@{margin-prefix-cls}-xlarge-top {
  margin-top: @margin-xlarge-margin !important;
}
.@{margin-prefix-cls}-xlarge-bottom {
  margin-bottom: @margin-xlarge-margin !important;
}
.@{margin-prefix-cls}-xlarge-left {
  margin-left: @margin-xlarge-margin !important;
}
.@{margin-prefix-cls}-xlarge-right {
  margin-right: @margin-xlarge-margin !important;
}

/* Desktop and bigger */
@media (min-width: @screen-lg) {
  .@{margin-prefix-cls}-xlarge {
    margin-bottom: @margin-xlarge-margin-l;
  }
  * + .@{margin-prefix-cls}-xlarge {
    margin-top: @margin-xlarge-margin-l !important;
  }

  .@{margin-prefix-cls}-xlarge-top {
    margin-top: @margin-xlarge-margin-l !important;
  }
  .@{margin-prefix-cls}-xlarge-bottom {
    margin-bottom: @margin-xlarge-margin-l !important;
  }
  .@{margin-prefix-cls}-xlarge-left {
    margin-left: @margin-xlarge-margin-l !important;
  }
  .@{margin-prefix-cls}-xlarge-right {
    margin-right: @margin-xlarge-margin-l !important;
  }
}

/* Remove
 ========================================================================== */

.@{margin-prefix-cls}-remove {
  margin: 0 !important;
}
.@{margin-prefix-cls}-remove-top {
  margin-top: 0 !important;
}
.@{margin-prefix-cls}-remove-bottom {
  margin-bottom: 0 !important;
}
.@{margin-prefix-cls}-remove-left {
  margin-left: 0 !important;
}
.@{margin-prefix-cls}-remove-right {
  margin-right: 0 !important;
}

.@{margin-prefix-cls}-remove-vertical {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.@{margin-prefix-cls}-remove-adjacent + * {
  margin-top: 0 !important;
}

/* Auto
 ========================================================================== */

.@{margin-prefix-cls}-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.@{margin-prefix-cls}-auto-top {
  margin-top: auto !important;
}
.@{margin-prefix-cls}-auto-bottom {
  margin-bottom: auto !important;
}
.@{margin-prefix-cls}-auto-left {
  margin-left: auto !important;
}
.@{margin-prefix-cls}-auto-right {
  margin-right: auto !important;
}

.@{margin-prefix-cls}-auto-vertical {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
