@import '../../style/themes/default.less';
@align-prefix-cls: ~'@{clinia-prefix}-align';
/* ========================================================================
   Component: Align
 ========================================================================== */

[class*='clinia-align'] {
  display: block !important;
}

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

.@{align-prefix-cls}-left {
  float: left;
}

.@{align-prefix-cls}-right {
  float: right;
}

@media (min-width: @screen-sm) {
  .@{align-prefix-cls}-left\@s {
    &:extend(.@{align-prefix-cls}-left);
  }

  .@{align-prefix-cls}-right\@s {
    &:extend(.@{align-prefix-cls}-right);
  }
}

@media (min-width: @screen-md) {
  .@{align-prefix-cls}-left\@m {
    &:extend(.@{align-prefix-cls}-left);
  }

  .@{align-prefix-cls}-right\@m {
    &:extend(.@{align-prefix-cls}-right);
  }
}

@media (min-width: @screen-lg) {
  .@{align-prefix-cls}-left\@l {
    &:extend(.@{align-prefix-cls}-left);
  }

  .@{align-prefix-cls}-right\@l {
    &:extend(.@{align-prefix-cls}-right);
  }
}

@media (min-width: @screen-xl) {
  .@{align-prefix-cls}-left\@xl {
    &:extend(.@{align-prefix-cls}-left);
  }

  .@{align-prefix-cls}-right\@xl {
    &:extend(.@{align-prefix-cls}-right);
  }
}
