// hide
.hide {
  display: none !important;
}

.hidden {
  visibility: hidden !important;
}

// layout
.block {
  display: block !important;
}

.display-block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.flexbox {
  display: flex !important;
}

.flex {
  flex: 1 !important;
}

.relative {
  position: relative !important;
}

// float
.clearfix {
  @include clearfix;
}

.clear-right {
  zoom: 1;

  &:after {
    content: '.';
    display: block;
    clear: right;
    overflow: hidden;
    height: 0;
    visibility: hidden;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

// space
.margin-l8 {
  margin-left: 8px !important;
}

.margin-l12 {
  margin-left: 12px !important;
}

.margin-r8 {
  margin-right: 8px !important;
}

.margin-r12 {
  margin-right: 12px !important;
}

.margin-t8 {
  margin-top: 8px !important;
}

.margin-t12 {
  margin-top: 12px !important;
}

.margin-b0 {
  margin-bottom: 0 !important;
}

.margin-b8 {
  margin-bottom: 8px !important;
}

.margin-b12 {
  margin-bottom: 12px !important;
}

.padding-12 {
  padding: 12px !important;
}

.padding-20 {
  padding: 20px !important;
}

// width / height
.width-full {
  width: 100% !important;
}

.max-width-full {
  max-width: 100% !important;
}

.width-auto {
  width: auto !important;
}

.height-full {
  height: 100% !important;
}

.height-auto {
  height: auto !important;
}

// font
// size
.font-base {
  font-size: 14px !important;
}

.font-sm {
  font-size: 12px !important;
}

.font-lg {
  font-size: 16px !important;
}

.font-xl {
  font-size: 20px !important;
}

.font-xxl {
  font-size: 28px !important;
}

.font-xxxl {
  font-size: 40px !important;
}

.font-xxxxl {
  font-size: 56px !important;
}

// family
.font-code {
  font-family: $font-family-code !important;
}

.font-id {
  font-family: $font-family-id !important;
}

// weight
.font-thin {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-bold {
  font-weight: 600 !important;
}

// color
.text-second {
  color: $second-text-color !important;
}

.text-third {
  color: $third-text-color !important;
}

.text-primary {
  color: $primary !important;
}

.text-title {
  @include TypographyTitleH6($dark-color07);
}

.text-desc {
  @include TypographyParagraph($dark-color01);
}

// text align
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-jusify {
  text-align: justify !important;
  text-justify: inter-ideograph !important;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.ellipsis {
  @include ellipsis;
}

.nowrap {
  @include nowrap;
}

.break-all {
  @include break-all;
}

// border
.border {
  border: 1px solid $border-color !important;
}

.border-top {
  border-top: 1px solid $border-color !important;
}

.border-right {
  border-right: 1px solid $border-color !important;
}

.border-bottom {
  border-bottom: 1px solid $border-color !important;
}

.border-left {
  border-top: 1px solid $border-color !important;
}

.rounded {
  border-radius: $border-radius !important;
}

.rounded-circle {
  border-radius: 100% !important;
}

// shadow
.shadow {
  box-shadow: $base-shadow !important;
}

.shadow-reverse {
  box-shadow: 0 -2px 4px 0 rgba(72, 91, 127, 0.2);
}

.no-shadow {
  box-shadow: none !important;
}

// cursor
.pointer {
  cursor: pointer !important;
}
