exadel-inc/esl

@import (reference) './variables.less';
 
// Block
.d-block {
  display: block !important;
}
 
// Flex
.d-flex {
  display: flex !important;
}
 
// Position
.relative-block {
  position: relative;
}
 
.hide {
  display: none !important;
  @media @xs {
    &-xs {
      display: none !important;
    }
  }
  @media @xs-sm {
    &-mobile {
      display: none !important;
    }
  }
  @media @md-xl {
    &-desktop {
      display: none !important;
    }
  }
}
.show {
  @media @sm-xl {
    &-xs {
      display: none !important;
    }
  }
}
 
// Margin
.m {
  &-0 {
    margin: 0 !important;
  }
  &-1 {
    margin: 0.5rem !important;
  }
  &-2 {
    margin: 1rem !important;
  }
  &-4 {
    margin: 2rem !important;
  }
  &-auto {
    margin: auto !important;
  }
}
 
// Margin-top
.mt {
  &-0 {
    margin-top: 0 !important;
  }
  &-1 {
    margin-top: 0.5rem !important;
  }
  &-2 {
    margin-top: 1rem !important;
  }
  &-4 {
    margin-top: 2rem !important;
  }
}
 
// Margin-bottom
.mb {
  &-0 {
    margin-bottom: 0 !important;
  }
  &-1 {
    margin-bottom: 0.5rem !important;
  }
  &-2 {
    margin-bottom: 1rem !important;
  }
  &-4 {
    margin-bottom: 2rem !important;
  }
}
 
// Margin-horizontal
.mx {
  &-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  &-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }
  &-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  &-4 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  &-6 {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
  }
  &-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}
 
// Padding
.p {
  &-2 {
    padding: 0.5rem !important;
  }
  &-3 {
    padding: 1rem !important;
  }
  &-4 {
    padding: 1.5rem !important;
  }
}
 
// Padding-top
.pt-2 {
  padding-top: 0.5rem !important;
}
 
// Padding-bottom
.pb-2 {
  padding-bottom: 0.5rem !important;
}
 
// Border radius
.round {
  border-radius: 0.5rem;
}
 
// List helpers
.unstyled-list li {
  list-style-type: none;
}
 
// Text
.text {
  &-uppercase {
    text-transform: uppercase !important;
  }
  &-lowercase {
    text-transform: lowercase !important;
  }
  &-left {
    text-align: left !important;
  }
  &-center {
    text-align: center !important;
  }
  &-right {
    text-align: right !important;
  }
}
 
// A11ty helpers
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
.list-spaced {
  > li {
    margin-block-end: 0.5rem;
  }
}
 
.icon-inline {
  display: inline-flex;
 
  min-width: 1em;
  height: 1em;
 
  &.large {
    min-width: 2em;
    height: 2em;
  }
}