@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import "../../themes/media-queries.scss";
@import "../../themes/common-variables.scss";
@import "../../themes/font-mixins.scss";

.align-extend, .align-center, .align-right, .align-left {

  width: 100%;

  &.mobile {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}

// tablet && desktop
@include mq($min-width: $screen-sm-min, $max-width: $screen-lg-max) {
  $aligned-width: 326px;
  $inner-margin: 20px;
  
  .base-align {
    width: $aligned-width;
    float: none;
    margin-bottom: rem($inner-margin);
  }

  .align-left {
    @extend .base-align;
    float: left;
    margin-right: rem($inner-margin);
  }

  .align-right {
    @extend .base-align;
    float: right;
    margin-left: rem($inner-margin);
  }

  .align-center {
    width: 100%;
  }
}

// desktop HD
@include mq($min-width: $screen-hd-min) {
  $aligned-width: 344px;
  $inner-margin: 20px;

  .base-align {
    width: $aligned-width;
    float: none;
    margin-bottom: rem($inner-margin);
  }

  .align-left {
    @extend .base-align;
    float: left;
    margin-right: rem($inner-margin);
  }

  .align-right {
    @extend .base-align;
    float: right;
    margin-left: rem($inner-margin);
  }

  .align-center {
    width: 100%;
  }
}