$sep: $condition-separator;

// Show/Hide
.#{$prefix}invisible {
  visibility: hidden !important;
}

.#{$prefix}visible {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.#{$prefix}hidden {
  display: none !important;
}

// Based on Size
@include each-breakpoint('.#{$prefix}invisible#{$sep}name', 'name') {
  visibility: hidden !important;
}

@include each-breakpoint('.#{$prefix}visible#{$sep}name', 'name') {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@include each-breakpoint('.#{$prefix}hidden#{$sep}name', 'name') {
  display: none !important;
}

// On Dark
[#{$prefix}theme="dark"] {
  .#{$prefix}visible#{$sep}dark {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .#{$prefix}hidden#{$sep}dark {
    display: none !important;
  }

  .#{$prefix}invisible#{$sep}dark {
    visibility: hidden !important;
  }
}

// Display Types
@each $name in (inline, block, flex, inline-block, inline-flex, list-item) {
  .#{$prefix}#{$name} {
    display: #{$name} !important;
  }

  @include each-breakpoint('.#{$prefix}#{$name}#{$sep}brname', 'brname') {
    display: #{$name} !important;
  }
}

// Margin and Padding
@for $value from 0 through 10 {

  // Margin
  .#{$prefix}m-#{$value} {
    margin: $value * 1rem !important;
  }
  .#{$prefix}m-t-#{$value} {
    margin-top: $value * 1rem !important;
  }
  .#{$prefix}m-b-#{$value} {
    margin-bottom: $value * 1rem !important;
  }
  .#{$prefix}m-l-#{$value} {
    margin-left: $value * 1rem !important;
  }
  .#{$prefix}m-r-#{$value} {
    margin-right: $value * 1rem !important;
  }
  .#{$prefix}m-x-#{$value} {
    margin-left: $value * 1rem !important;
    margin-right: $value * 1rem !important;
  }
  .#{$prefix}m-y-#{$value} {
    margin-top: $value * 1rem !important;
    margin-bottom: $value * 1rem !important;
  }

  // Padding
  .#{$prefix}p-#{$value} {
    padding: $value * 1rem !important;
  }
  .#{$prefix}p-t-#{$value} {
    padding-top: $value * 1rem !important;
  }
  .#{$prefix}p-b-#{$value} {
    padding-bottom: $value * 1rem !important;
  }
  .#{$prefix}p-l-#{$value} {
    padding-left: $value * 1rem !important;
  }
  .#{$prefix}p-r-#{$value} {
    padding-right: $value * 1rem !important;
  }
  .#{$prefix}p-x-#{$value} {
    padding-left: $value * 1rem !important;
    padding-right: $value * 1rem !important;
  }
  .#{$prefix}p-y-#{$value} {
    padding-top: $value * 1rem !important;
    padding-bottom: $value * 1rem !important;
  }
}

@mixin marginless {
  margin: 0 !important;
  margin: {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

@mixin paddingless {
  padding: 0 !important;
  padding: {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

.#{$prefix}marginless {
  @include marginless
}

.#{$prefix}paddingless {
  @include paddingless
}

@include each-breakpoint('.#{$prefix}marginless#{$sep}name', 'name') {
  @include marginless;
}

@include each-breakpoint('.#{$prefix}paddingless#{$sep}name', 'name') {
  @include paddingless;
}

// Float
.#{$prefix}left {
  float: left !important;
}

.#{$prefix}right {
  float: right !important;
}

// Image Helper
.#{$prefix}flip-horizontal, .#{$prefix}flip-x {
  transform: scaleX(-1);
}

.#{$prefix}flip-vertical, .#{$prefix}flip-y {
  transform: scaleY(-1);
}

.#{$prefix}flip-horizontal.#{$prefix}flip-y,
.#{$prefix}flip-horizontal.#{$prefix}flip-vertical,
.#{$prefix}flip-vertical.#{$prefix}flip-x,
.#{$prefix}flip-x.#{$prefix}flip-y {
  transform: scale(-1, -1);
}

@each $value in (15, 30, 45, 60, 90, 120, 180) {
  .#{$prefix}rotate-#{$value} {
    transform: rotate(#{$value}deg);
  }

  .#{$prefix}rotate--#{$value} {
    transform: rotate(-#{$value}deg);
  }
}

// Shape Helper
.#{$prefix}fullwidth, .#{$prefix}fillup {
  @extend %full-width;
}

@include each-breakpoint('.#{$prefix}fullwidth#{$sep}name, .#{$prefix}fillup#{$sep}name', 'name') {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
}

.#{$prefix}fullheight {
  @extend %full-height;
}

@include each-breakpoint('.#{$prefix}fullheight#{$sep}name', 'name') {
  height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
}

.#{$prefix}rounded {
  border-radius: 9999px !important;
}

.#{$prefix}semi-rounded {
  border-radius: 10px !important;
}

.#{$prefix}radiusless, .#{$prefix}sharp {
  border-radius: 0 !important;
}

// No Pointer Event
.#{$prefix}static, .#{$prefix}unresponsive {
  pointer-events: none;
}

.#{$prefix}clearfix {
  overflow: hidden;
  @include clearfix;
}

// Justify
@each $name, $value in ('start', flex-start),
                       ('center', center),
                       ('end', flex-end),
                       ('around', space-around),
                       ('between', space-between),
                       ('evenly', space-evenly) {
  .#{$prefix}justify-#{$name} {
    justify-content: $value;
  }
}

// Align
@each $name, $value in ('start', flex-start),
                       ('center', center),
                       ('end', flex-end),
                       ('stretch', stretch),
                       ('baseline', baseline) {
  .#{$prefix}align-#{$name} {
    align-items: $value;
  }
}

// Direction
@each $value in column, column-reverse, row, row-reverse {
  .#{$prefix}direction-#{$value} {
    flex-direction: $value;
  }
}

// Align
@each $value in nowrap, wrap, wrap-reverse {
  .#{$prefix}#{$value} {
    flex-wrap: $value;
  }
}

// Grow
@for $num from 0 through 10 {
  .#{$prefix}grow-#{$num} {
    flex-grow: $num;
  }
}