@use '../core/namespace' as *;
@use '../mixins/responsive-utility' as *;
@use '../settings/breakpoints' as bp;
@use '../core/spacing' as sp;
@use "sass:map";

// === Containers ===
$container-paddings: (
  sm: sm,
  md: sm,
  lg: md,
  xl: md
);

// === Flex alignments ===
$alignments: (
  start: flex-start,
  center: center,
  end: flex-end,
  stretch: stretch,
  baseline: baseline
);

// === Flex justifications ===
$justifications: (
  start: flex-start,
  center: center,
  end: flex-end,
  between: space-between,
  around: space-around,
  evenly: space-evenly
);

// === Float positions ===
$float-positions: (
  left: left,
  right: right
);

// === BASE CLASSES ===

// === Base container ===
// Ex: .av-container, .av-container-fluid
@include ns("container") {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);

  &-fluid {
    max-width: none;
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
    overflow: hidden;
  }
}

// === Rows ===
// Ex: .av-row
@include utility-base("row", (
  display: flex,
  flex-direction: row
));

// === Columns ===
// Ex: .av-col
@include utility-base("col", (
  display: flex,
  flex-direction: column
));

// === Flex wrap ===
// Ex: .av-wrap / .av-nowrap
@include utility-base("wrap", (
  flex-wrap: wrap
));
@include utility-base("nowrap", (
  flex-wrap: nowrap
));

// === Accessibility ===
// Ex: .av-sr-only
@include utility-base("sr-only", (
  position: absolute !important,
  width: 1px !important,
  height: 1px !important,
  padding: 0 !important,
  margin: -1px !important,
  overflow: hidden !important,
  clip: rect(0, 0, 0, 0) !important,
  white-space: nowrap !important,
  border: 0 !important
));

// === Visibility classes ===
// Ex: .av-hidden / .av-unhidden
@include utility-base("hidden", (
  display: none !important
));
@include utility-base("unhidden", (
  display: inherit !important
));

// === Gapped layouts ===
// Ex: .av-gap-sm / .av-gap-lg / .av-gap-x-sm / .av-gap-y-lg
@each $size, $value in sp.$spacing {
  @include utility-base("gap-#{$size}", (
    gap: var(--spacing-#{$size})
  ));
  @include utility-base("gap-x-#{$size}", (
    column-gap: var(--spacing-#{$size})
  ));
  @include utility-base("gap-y-#{$size}", (
    row-gap: var(--spacing-#{$size})
  ));
}

// === Flex fill class ===
// Ex: .av-flex-fill
@include utility-base("flex-fill", (
  flex: 1 1 0%
));

// === Full width/height classes ===
// Ex: .av-w-full / .av-h-full
@include utility-base("w-full", (
  width: 100%
));
@include utility-base("h-full", (
  height: 100%
));

// === Unset width/height classes ===
// Ex: .av-w-unset / .av-h-unset
@include utility-base("w-unset", (
  width: unset
));
@include utility-base("h-unset", (
  height: unset
));

// === Flex alignment classes ===
// Ex: .av-align-center / .av-align-end
@each $alignment, $value in $alignments {
  @include utility-base("align-#{$alignment}", (
    align-items: $value
  ));
}

// === Flex justification classes ===
// Ex: .av-justify-center / .av-justify-between
@each $justification, $value in $justifications {
  @include utility-base("justify-#{$justification}", (
    justify-content: $value
  ));
}

// === Floating layout classes ===
// Ex: .av-floating-left / .av-floating-right
@each $float-position, $value in $float-positions {
  @include utility-base("floating-#{$float-position}", (
    position: fixed !important,
    #{$float-position}: var(--spacing-lg) !important,
    bottom: var(--spacing-lg) !important,
    z-index: 1000 !important
  ));
}

// === Sticky layout class ===
// Ex: .av-sticky
@include utility-base("sticky", (
  position: sticky !important
));

// === RESPONSIVE CLASSES ===

// === Responsive containers ===
// Ex: .av-container--md / .av-container--lg
@each $bp-name, $bp-value in bp.$breakpoints {
  @media (min-width: #{$bp-value}) {
    @include ns("container--#{$bp-name}") {
      width: 100%;
      max-width: #{$bp-value};
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--spacing-#{map.get($container-paddings, $bp-name)});
      padding-right: var(--spacing-#{map.get($container-paddings, $bp-name)});
    }
  }
}

// === Rows ===
// Ex: .av-row--sm / .av-row--lg
@include utility-responsive("row", (
  display: flex,
  flex-direction: row
));

// === Columns ===
// Ex: .av-col--sm / .av-col--md
@include utility-responsive("col", (
  display: flex,
  flex-direction: column
));

// === Flex wrap ===
// Ex: .av-wrap--md / .av-nowrap--lg
@include utility-responsive("wrap", (
  flex-wrap: wrap
));
@include utility-responsive("nowrap", (
  flex-wrap: nowrap
));

// === Accessibility ===
// Ex: .av-sr-only--sm / .av-sr-only--md / .av-sr-only--lg / .av-sr-only--xl
@include utility-responsive("sr-only", (
  position: absolute !important,
  width: 1px !important,
  height: 1px !important,
  padding: 0 !important,
  margin: -1px !important,
  overflow: hidden !important,
  clip: rect(0, 0, 0, 0) !important,
  white-space: nowrap !important,
  border: 0 !important
));

// === Visibility classes ===
// Ex: .av-hidden--md / .av-unhidden--lg
@include utility-responsive("hidden", (
  display: none !important
));
@include utility-responsive("unhidden", (
  display: inherit !important
));

// === Gapped layouts ===
// Ex: .av-gap-lg--lg
@each $size, $value in sp.$spacing {
  @include utility-responsive("gap-#{$size}", (
    gap: var(--spacing-#{$size})
  ));
  @include utility-responsive("gap-x-#{$size}", (
    column-gap: var(--spacing-#{$size})
  ));
  @include utility-responsive("gap-y-#{$size}", (
    row-gap: var(--spacing-#{$size})
  ));
}

// === Flex fill class ===
// Ex: .av-flex-fill--md
@include utility-responsive("flex-fill", (
  flex: 1 1 0%
));

// === Full width/height classes ===
// Ex: .av-w-full--lg / .av-h-full--md
@include utility-responsive("w-full", (
  width: 100%
));
@include utility-responsive("h-full", (
  height: 100%
));

// === Unset width/height classes ===
// Ex: .av-w-unset--md / .av-h-unset--lg
@include utility-responsive("w-unset", (
  width: unset
));
@include utility-responsive("h-unset", (
  height: unset
));

// === Flex alignment classes ===
// Ex: .av-align-baseline--lg
@each $alignment, $value in $alignments {
  @include utility-responsive("align-#{$alignment}", (
    align-items: $value
  ));
}

// === Flex justification classes ===
// Ex: .av-justify-end--md
@each $justification, $value in $justifications {
  @include utility-responsive("justify-#{$justification}", (
    justify-content: $value
  ));
}

// === Sticky layout class ===
// Ex: .av-sticky--md
@include utility-responsive("sticky", (
  position: sticky !important
));