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

// flex
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.center-flex-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

// font weight
.bold {
  font-weight: bold;
}

//== others
.nowrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//==  visible
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

// space
@mixin space($list...) {
  @each $num in $list {
    .pl#{$num} {
      padding-left: #{$num}px !important;
    }

    .pr#{$num} {
      padding-right: #{$num}px !important;
    }

    .pt#{$num} {
      padding-top: #{$num}px !important;
    }

    .pb#{$num} {
      padding-bottom: #{$num}px !important;
    }

    .px#{$num} {
      padding-right: #{$num}px !important;
      padding-left: #{$num}px !important;
    }

    .py#{$num} {
      padding-top: #{$num}px !important;
      padding-bottom: #{$num}px !important;
    }

    .pa#{$num} {
      padding: #{$num}px !important;
    }

    .ml#{$num} {
      margin-left: #{$num}px !important;
    }

    .mr#{$num} {
      margin-right: #{$num}px !important;
    }

    .mt#{$num} {
      margin-top: #{$num}px !important;
    }

    .mb#{$num} {
      margin-bottom: #{$num}px !important;
    }

    .mx#{$num} {
      margin-right: #{$num}px !important;
      margin-left: #{$num}px !important;
    }

    .my#{$num} {
      margin-top: #{$num}px !important;
      margin-bottom: #{$num}px !important;
    }

    .ma#{$num} {
      margin: #{$num}px !important;
    }
  }
}

@include space(0, 2, 4, 8, 12, 16, 20, 24, 28, 32);
