/* ==========================================================================
   Margins & Padding
   ========================================================================== */

$props: ('margin', 'padding');
$subProps: ('', 'left', 'right', 'top', 'bottom');

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector}-double {
    #{$property}: $layout-spacing-base * 2 !important;
  }

  #{$selector} {
    #{$property}: $layout-spacing-base !important;
  }

  #{$selector}-half {
    #{$property}: $layout-spacing-base * 0.5 !important;
  }

  #{$selector}-quarter {
    #{$property}: $layout-spacing-base * 0.25 !important;
  }

  #{$selector}-clear {
    #{$property}: 0 !important;
  }

  #{$selector}-auto {
    #{$property}: auto !important;
  }
}

/* ==========================================================================
   Visibility
   ========================================================================== */

$props: ('display');
$subProps: (none, block, inline-block, flex, inline-flex, inline);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    display: $style !important;
  }
}

$props: ('opacity');
$subProps: ('50', '100');

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    opacity: #{$style + '%'};
  }
}

/* ==========================================================================
   Position
   ========================================================================== */

$props: ('position');
$subProps: (absolute, relative, fixed, initial, inherit, sticky, static, unset);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    position: $style;
  }
}

/* ==========================================================================
   Widths
   ========================================================================== */

$props: ('width');
$subProps: ('50', '100');

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    width: unquote('#{$style}%');
  }
}

$props: ('width-spacing-base');
$subProps: (
  'quarter',
  'half',
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10'
);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  @if $style == 'half' {
    #{$selector} {
      width: calc(0.5 * #{$layout-spacing-base});
    }
  } @else if $style == 'quarter' {
    #{$selector} {
      width: calc(0.25 * #{$layout-spacing-base});
    }
  } @else {
    #{$selector} {
      width: calc(#{$style} * #{$layout-spacing-base});
    }
  }
}

/* ==========================================================================
   Overflow
   ========================================================================== */

$props: ('overflow');
$subProps: (visible, hidden);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    overflow: $style;
  }
}

/* ==========================================================================
   Vertical align
   ========================================================================== */

$props: ('vertical-align');
$subProps: (
  baseline,
  inherit,
  top,
  bottom,
  middle,
  text-top,
  text-bottom,
  sub,
  super,
  length
);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    vertical-align: $style;
  }
}

/* ==========================================================================
   Align items
   ========================================================================== */

$props: ('align-items');
$subProps: (stretch, center, flex-start, flex-end, baseline, initial, inherit);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    align-items: $style;
  }
}

/* ==========================================================================
   justify-content
   ========================================================================== */

$props: ('justify-content');
$subProps: (
  baseline,
  center,
  end,
  flex-end,
  flex-start,
  initial,
  inherit,
  space-around,
  space-between,
  space-evenly,
  stretch
);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    justify-content: $style;
  }
}

/* ==========================================================================
   Flex direction
   ========================================================================== */

$props: ('flex-direction');
$subProps: (row, column);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    flex-direction: $style;
  }
}

/* ==========================================================================
   Heights
   ========================================================================== */

.gui-full-height-minus-topbar {
  height: calc(100vh - #{$top-bar-height-medium});

  @include respond-to-max($screen-md) {
    height: calc(100vh - #{$top-bar-height});
  }
}

.gui-dropdown-max-height {
  max-height: 230px;
  overflow-y: auto;
}

/* ==========================================================================
   Borders
   ========================================================================== */

$props: ('border-default');
$subProps: (top, bottom, left, right, full, clear);

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  @if $style == 'full' {
    #{$selector} {
      border: $color-border-base 1px solid;
    }
  } @else if $style == 'clear' {
    #{$selector} {
      border: none;
    }
  } @else {
    #{$selector} {
      border-#{$style}: $color-border-base 1px solid;
    }
  }
}

.gui-h-border-radius-clear {
  border-radius: 0;
}

/* ==========================================================================
   Transform - Rotate
   ========================================================================== */

$props: ('transform-rotate');
$subProps: ('');

@include generate-helper($props, $subProps) using ($selector, $property, $style) {
  #{$selector} {
    transform: rotate(0turn);
  }

  #{$selector}-quarter {
    transform: rotate(0.25turn);
  }

  #{$selector}-half {
    transform: rotate(0.5turn);
  }

  #{$selector}-three-quarters {
    transform: rotate(0.75turn);
  }
}