@import './mixins';

:global {
  .visually-hidden {
    @include visually-hidden;
  }
}

$display: 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid',
  'inline-grid';
$placeItems: 'center', 'start', 'end', 'self-start', 'self-end';
$alignItems: 'normal', 'stretch', 'center', 'start', 'end', 'flex-start',
  'flex-end';
$alignContent: 'normal', 'center', 'start', 'end', 'flex-start', 'flex-end',
  'space-between', 'space-around', 'space-evenly', 'stretch';
$justifyItems: 'normal', 'stretch', 'center', 'start', 'end', 'flex-start',
  'flex-end', 'self-start', 'self-end', 'left', 'right';
$justifyContent: 'normal', 'center', 'start', 'end', 'flex-start', 'flex-end',
  'left', 'right', 'space-between', 'space-around', 'space-evenly', 'stretch';
$justifySelf: 'normal', 'stretch', 'center', 'start', 'end', 'flex-start',
  'flex-end', 'self-start', 'self-end', 'left', 'right';
$alignSelf: 'normal', 'stretch', 'center', 'start', 'end', 'flex-start',
  'flex-end', 'self-start', 'self-end';
$flexWrap: 'nowrap', 'wrap', 'wrap-reverse';
$flexDirection: 'row', 'row-reverse', 'column', 'column-reverse';
$spacing: (
  '0': 0,
  'half': 0.5,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
);
$border: 0, 1;
$borderTop: 0, 1;
$borderRight: 0, 1;
$borderBottom: 0, 1;
$borderLeft: 0, 1;
$borderWidth: 0, 1, 2;
$borderColor: (
  'contrast-default': var(--color-border-default-contrast),
  'contrast-high': var(--color-border-high-contrast),
  'contrast-low': var(--color-border-low-contrast),
  'state-default': var(--color-border-state-default),
  'state-error': var(--color-border-state-error),
  'state-info': var(--color-border-state-info),
  'state-success': var(--color-border-state-success),
  'state-warning': var(--color-border-state-warning),
  'status-default': var(--color-border-status-default),
  'status-error': var(--color-border-status-error),
  'status-info': var(--color-border-status-info),
  'status-success': var(--color-border-status-success),
  'status-warning': var(--color-border-status-warning),
);
$borderRadius: 0, 2;
$bgColor: (
  'primary': var(--color-fill-bg-primary),
  'secondary': var(--color-fill-bg-secondary),
  'tertiary': var(--color-fill-bg-tertiary),
  'inverse': var(--color-fill-bg-inverse),
);
$layout: 'flex-column', 'flex-center';

// Dynamically generating the utility classes

:global {
  @for $i from 0 through 8 {
    // Margin
    .m-#{$i} {
      margin: $unit * $i;
    }

    .mt-#{$i} {
      margin-top: $unit * $i;
    }

    .mr-#{$i} {
      margin-right: $unit * $i;
    }

    .mb-#{$i} {
      margin-bottom: $unit * $i;
    }

    .ml-#{$i} {
      margin-left: $unit * $i;
    }

    .mx-#{$i} {
      margin-left: $unit * $i;
      margin-right: $unit * $i;
    }

    .my-#{$i} {
      margin-top: $unit * $i;
      margin-bottom: $unit * $i;
    }

    // Negative Margins
    .-mt-#{$i} {
      margin-top: $unit * $i * -1;
    }

    .-mr-#{$i} {
      margin-right: $unit * $i * -1;
    }

    .-mb-#{$i} {
      margin-bottom: $unit * $i * -1;
    }

    .-ml-#{$i} {
      margin-left: $unit * $i * -1;
    }

    // Padding
    .p-#{$i} {
      padding: $unit * $i;
    }

    .pt-#{$i} {
      padding-top: $unit * $i;
    }

    .pr-#{$i} {
      padding-right: $unit * $i;
    }

    .pb-#{$i} {
      padding-bottom: $unit * $i;
    }

    .pl-#{$i} {
      padding-left: $unit * $i;
    }

    .px-#{$i} {
      padding-left: $unit * $i;
      padding-right: $unit * $i;
    }

    .py-#{$i} {
      padding-top: $unit * $i;
      padding-bottom: $unit * $i;
    }
  }

  @each $value in $display {
    .display-#{$value} {
      display: #{$value};
    }
  }

  @each $value in $placeItems {
    .place-items-#{$value} {
      place-items: #{$value};
    }
  }

  @each $value in $alignItems {
    .align-items-#{$value} {
      align-items: #{$value};
    }
  }

  @each $value in $alignContent {
    .align-content-#{$value} {
      align-content: #{$value};
    }
  }

  @each $value in $justifyItems {
    .justify-items-#{$value} {
      justify-items: #{$value};
    }
  }

  @each $value in $justifyContent {
    .justify-content-#{$value} {
      justify-content: #{$value};
    }
  }

  @each $value in $justifySelf {
    .justify-self-#{$value} {
      justify-self: #{$value};
    }
  }

  @each $value in $alignSelf {
    .align-self-#{$value} {
      align-self: #{$value};
    }
  }

  @each $value in $flexWrap {
    .flex-#{$value} {
      flex-wrap: #{$value};
    }
  }

  @each $value in $flexDirection {
    .flex-#{$value} {
      flex-direction: #{$value};
    }
  }

  @each $key, $value in $spacing {
    .gap-#{$key} {
      gap: $unit * $value;
    }

    .gap-x-#{$key} {
      column-gap: $value;
    }

    .gap-y-#{$key} {
      row-gap: $value;
    }
  }

  @each $value in $border {
    .border-#{$value} {
      border: #{$value}px solid var(--color-border-state-default);
    }
  }

  @each $value in $borderWidth {
    .border-width-#{$value} {
      border-width: #{$value}px;
    }
  }

  @each $value in $borderTop {
    .border-t-#{$value} {
      border-top: #{$value}px solid var(--color-border-state-default);
    }
  }

  @each $value in $borderRight {
    .border-r-#{$value} {
      border-right: #{$value}px solid var(--color-border-state-default);
    }
  }

  @each $value in $borderBottom {
    .border-b-#{$value} {
      border-bottom: #{$value}px solid var(--color-border-state-default);
    }
  }

  @each $value in $borderLeft {
    .border-l-#{$value} {
      border-left: #{$value}px solid var(--color-border-state-default);
    }
  }

  @each $key, $value in $borderColor {
    .border-color-#{$key} {
      border-color: #{$value};
    }
  }

  @each $value in $borderRadius {
    .border-radius-#{$value} {
      border-radius: #{$value}px;
    }
  }

  @each $key, $value in $bgColor {
    .bg-#{$key} {
      background-color: #{$value};
    }
  }
}