@import 'text';
@import 'generate-utilities';

// clearfix
%clearfix {
  @include clearfix();
}

.clearfix {
  @extend %clearfix;
}

// responsive hiding
%responsive-tablet-hide {
  @include media-tablet-up() { display: none !important; }
}

%responsive-mobile-hide {
  @include media-only-mobile() { display: none !important; }
}

.hide-only-mobile {
  @extend %responsive-mobile-hide;
}

.hide-tablet-up {
  @extend %responsive-tablet-hide;
}

// responsive wrapper. overflow-x auto.
.responsive-wrapper {
  max-width: 100%;
  overflow-x: auto;

  table {
    width: auto;
    max-width: none;
  }
}

// centering
%position-center-container { @include position-center-container; }
%position-center { @include position-center; }

.center-position-container,
.position-center-container {
  @include position-center-container;

  .center-position,
  .position-center {
    @include position-center;
  }
}

// position
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $z-index-fixed;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: $z-index-sticky;
}

// background-color: contrast text color
@each $color, $value in map-merge(
  $color-set,
  (
    'body': $body-bg,
    'white': $white,
    'transparent': transparent // "transparent" for prevent error in mini-css-extract-plugin.
  )
) {
  .bg-#{$color} { color: get-contrast($value); }
}

// bg-gradient
@if $enable-gradients {
  @each $color, $value in $color-set {
    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
  }
}

// misc
.box-line { border: 1px solid $secondary-color; }
.group { margin-bottom: $space-3; }
.debug-line { @include debug; }