@import 'flive-vars';

.base {
  flex-grow: 1;
  position: relative;
}
.with-header {
  composes: base;
  margin-top: $header-height-desktop;
}
.margin-left {
  composes: base;
  margin-left: $column-width + $column-border-size;
}
.margin-left-sm{
  margin-left: $sidemenu-width-sm;
}
.margin-left-md{
  margin-left: $sidemenu-width-md;
}
.margin-left-lg{
  margin-left: $sidemenu-width-lg;
}
.margin-right {
  composes: base;
  margin-left: $column-width + $column-border-size;
}
.margin-right-sm{
  margin-right: $sidemenu-width-sm;
}
.margin-right-md{
  margin-right: $sidemenu-width-md;
}
.margin-right-lg{
  margin-right: $sidemenu-width-lg;
}

@media (max-width: $breakpoint-max-mobile) {
  .breakpoint-mobile.margin-left { margin-left: 0 }
  .breakpoint-mobile.margin-right { margin-right: 0 }
}

.nomargin-xs{
  @media (max-width:$screen-xs-max){
    &.margin-left { margin-left: 0 }
    &.margin-right { margin-right: 0 }
  }
}
.nomargin-sm{
  @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max){
    &.margin-left { margin-left: 0 }
    &.margin-right { margin-right: 0 }
  }
}
.nomargin-md{
  @media (min-width:$screen-md-min) and (max-width:$screen-md-max){
    &.margin-left { margin-left: 0 }
    &.margin-right { margin-right: 0 }
  }
}
.nomargin-lg{
  @media (min-width:$screen-lg-min) and (max-width:$screen-lg-max){
    &.margin-left { margin-left: 0 }
    &.margin-right { margin-right: 0 }
  }
}
.nomargin-xl{
  @media (min-width:$screen-xl-min) {
    &.margin-left { margin-left: 0 }
    &.margin-right { margin-right: 0 }
  }
}