@use 'helpers-core';
@use "colors";
@use "media-queries";
@use "mixins";
@use "variables";

/* =Helpers (Extended)
-----------------------------------------------------------------------------*/

// Display (extended)

.flex-wrap {
  flex-wrap: wrap;
}

.display-table {
  display: table;
}

.display-inline-table {
  display: inline-table;
}

.display-table-cell {
  display: table-cell;
}

.display-list-item {
  display: list-item;
}

.display-inline-grid {
  display: inline-grid;
}

.display-subgrid {
  display: subgrid;
}

// Flex alignment

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

// Spacing (extended — directional extras + auto)

.margin-right-extra {
  margin-right: var(--ply-space-lg, 1.5rem);
}

.margin-left-auto {
  margin-left: auto;
}

.margin-left-extra {
  margin-left: var(--ply-space-lg, 1.5rem);
}

// Directional margin scale
.margin-top-xs    { margin-top: var(--ply-space-xs, 0.25rem); }
.margin-top-sm    { margin-top: var(--ply-space-sm, 0.5rem); }
.margin-top-lg    { margin-top: var(--ply-space-lg, 1.5rem); }
.margin-top-xl    { margin-top: var(--ply-space-xl, 2rem); }
.margin-top-xxl   { margin-top: var(--ply-space-xxl, 3rem); }

.margin-right-xs  { margin-right: var(--ply-space-xs, 0.25rem); }
.margin-right-sm  { margin-right: var(--ply-space-sm, 0.5rem); }
.margin-right-lg  { margin-right: var(--ply-space-lg, 1.5rem); }
.margin-right-xl  { margin-right: var(--ply-space-xl, 2rem); }
.margin-right-xxl { margin-right: var(--ply-space-xxl, 3rem); }

.margin-bottom-xs  { margin-bottom: var(--ply-space-xs, 0.25rem); }
.margin-bottom-sm  { margin-bottom: var(--ply-space-sm, 0.5rem); }
.margin-bottom-lg  { margin-bottom: var(--ply-space-lg, 1.5rem); }
.margin-bottom-xl  { margin-bottom: var(--ply-space-xl, 2rem); }
.margin-bottom-xxl { margin-bottom: var(--ply-space-xxl, 3rem); }

.margin-left-xs   { margin-left: var(--ply-space-xs, 0.25rem); }
.margin-left-sm   { margin-left: var(--ply-space-sm, 0.5rem); }
.margin-left-lg   { margin-left: var(--ply-space-lg, 1.5rem); }
.margin-left-xl   { margin-left: var(--ply-space-xl, 2rem); }
.margin-left-xxl  { margin-left: var(--ply-space-xxl, 3rem); }

.no-right-margin {
  margin-right: 0 !important;
}

.no-left-margin {
  margin-left: 0 !important;
}

.no-top-padding {
  padding-top: 0 !important;
}

.no-right-padding {
  padding-right: 0 !important;
}

.no-bottom-padding {
  padding-bottom: 0 !important;
}

.no-left-padding {
  padding-left: 0 !important;
}

// Padding (extended — directional extras)

.padding-top-extra {
  padding-top: var(--ply-space-lg, 1.5rem);
}

.padding-right-extra {
  padding-right: var(--ply-space-lg, 1.5rem);
}

.padding-bottom-extra {
  padding-bottom: var(--ply-space-lg, 1.5rem);
}

.padding-left-extra {
  padding-left: var(--ply-space-lg, 1.5rem);
}

// Directional padding scale
.padding-top-xs    { padding-top: var(--ply-space-xs, 0.25rem); }
.padding-top-sm    { padding-top: var(--ply-space-sm, 0.5rem); }
.padding-top-lg    { padding-top: var(--ply-space-lg, 1.5rem); }
.padding-top-xl    { padding-top: var(--ply-space-xl, 2rem); }
.padding-top-xxl   { padding-top: var(--ply-space-xxl, 3rem); }

.padding-right-xs  { padding-right: var(--ply-space-xs, 0.25rem); }
.padding-right-sm  { padding-right: var(--ply-space-sm, 0.5rem); }
.padding-right-lg  { padding-right: var(--ply-space-lg, 1.5rem); }
.padding-right-xl  { padding-right: var(--ply-space-xl, 2rem); }
.padding-right-xxl { padding-right: var(--ply-space-xxl, 3rem); }

.padding-bottom-xs { padding-bottom: var(--ply-space-xs, 0.25rem); }
.padding-bottom-sm { padding-bottom: var(--ply-space-sm, 0.5rem); }
.padding-bottom-lg { padding-bottom: var(--ply-space-lg, 1.5rem); }
.padding-bottom-xl { padding-bottom: var(--ply-space-xl, 2rem); }
.padding-bottom-xxl{ padding-bottom: var(--ply-space-xxl, 3rem); }

.padding-left-xs   { padding-left: var(--ply-space-xs, 0.25rem); }
.padding-left-sm   { padding-left: var(--ply-space-sm, 0.5rem); }
.padding-left-lg   { padding-left: var(--ply-space-lg, 1.5rem); }
.padding-left-xl   { padding-left: var(--ply-space-xl, 2rem); }
.padding-left-xxl  { padding-left: var(--ply-space-xxl, 3rem); }

// Borders (extended)

.border-right {
  border-right: 1px solid var(--ply-border-color, colors.$border-color);
}

.border-left {
  border-left: 1px solid var(--ply-border-color, colors.$border-color);
}

.border-top-thick {
  border-top: 3px solid var(--ply-border-color, colors.$border-color);
}

.border-right-thick {
  border-right: 3px solid var(--ply-border-color, colors.$border-color);
}

.border-bottom-thick {
  border-bottom: 3px solid var(--ply-border-color, colors.$border-color);
}

.border-left-thick {
  border-left: 3px solid var(--ply-border-color, colors.$border-color);
}

.border-thick {
  border: 3px solid var(--ply-border-color, colors.$border-color);
}

.no-border-top {
  border-top: 0 none !important;
}

.no-border-right {
  border-right: 0 none !important;
}

.no-border-bottom {
  border-bottom: 0 none !important;
}

.no-border-left {
  border-left: 0 none !important;
}

// Responsive width variants

$width-breakpoints: (
  "small-desktop": media-queries.$breakpoint-small-desktop,
  "tablet": media-queries.$breakpoint-tablet,
  "large-phone": media-queries.$breakpoint-large-phone,
  "phone": media-queries.$breakpoint-phone,
);

@each $bp-name, $bp-value in $width-breakpoints {
  @media (max-width: $bp-value) {
    @each $name, $value in variables.$width-scale {
      .#{$bp-name}-width-#{$name} { width: $value; }
    }
  }
}

@each $name, $value in variables.$width-scale {
  .height-#{$name} { height: $value; }
}

// UI Helpers (extended)

.border-box {
  box-sizing: border-box;
}

// Skip link — visible only on focus for keyboard navigation
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--ply-bg-body);
  color: var(--ply-color-link);
  text-decoration: underline;
  font-weight: 600;

  &:focus {
    top: 0;
  }
}

.circle {
  border-radius: 100%;
}

.border-radius-lg {
  border-radius: calc(var(--ply-border-radius) * 3);
}

.border-radius-xl {
  border-radius: calc(var(--ply-border-radius) * 6);
}

// Text color helpers (theme-compatible)
.text-primary {
  color: var(--ply-color-body);
}

.text-secondary {
  color: var(--ply-color-secondary);
}

.text-tertiary,
.text-muted {
  color: var(--ply-color-muted);
}

.text-inverse {
  color: var(--ply-color-text-inverse);
}

.text-on-color {
  color: #fff;
}

.no-orphan {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

// Transparent background overlay (theme-aware)
.bg-glass {
  background: var(--ply-bg-glass, rgba(255, 255, 255, 0.15));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

// Accent color utilities (theme-aware)
.color-accent { color: var(--ply-color-accent); }
.bg-accent    { background-color: var(--ply-color-accent); }

// Background color utilities (theme-aware, WCAG AA vs body text)
.bg-blue   { background-color: var(--ply-bg-blue); }
.bg-red    { background-color: var(--ply-bg-red); }
.bg-green  { background-color: var(--ply-bg-green); }
.bg-yellow { background-color: var(--ply-bg-yellow); }

// Gap utilities — also set --units-gap so unit calc() sizing adjusts automatically
.gap-xs {
  --units-gap: var(--ply-space-xs, 0.25rem);
  gap: var(--units-gap);
}

.gap-sm {
  --units-gap: var(--ply-space-sm, 0.5rem);
  gap: var(--units-gap);
}

.gap {
  --units-gap: var(--ply-space-md, 0.75rem);
  gap: var(--units-gap);
}

.gap-lg {
  --units-gap: var(--ply-space-lg, 1.5rem);
  gap: var(--units-gap);
}

.gap-xl {
  --units-gap: var(--ply-space-xl, 2rem);
  gap: var(--units-gap);
}

.gap-xxl {
  --units-gap: var(--ply-space-xxl, 3rem);
  gap: var(--units-gap);
}

// Link reset — suppress link styling inside a container
.no-link-style {
  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }
}

.spinning {
  @include mixins.spinning(.75s);

  display: inline-block;
}

.fade-in {
  @include mixins.fadeIn;
}

.code {
  border: 1px solid colors.$color-gray-light;
  border-radius: var(--ply-border-radius);
  display: inline-block;
  font-size: .8rem;
  font-family: variables.$font-family-code;
  padding: .05rem .35rem;
}

// Typography (extended)

.big {
  font-size: variables.$font-size-big;
}

.small {
  font-size: variables.$font-size-small;
}

.smaller {
  font-size: variables.$font-size-smaller;
}

.highlight {
  background-color: colors.$color-yellow-pastel;
}

.sans {
  font-family: variables.$font-family-base;
}

.serif {
  font-family: variables.$font-family-serif;
}

.mono {
  font-family: variables.$font-family-mono;
}

.hide-text {
  text-indent: -5000px;
  font-size: 0;
}

.normal {
  font-weight: normal;
}

.light {
  font-weight: 300 !important;
}

.medium {
  font-weight: 400 !important;
}

// Layer / Elevation Helpers

.layer-0 {
  background-color: var(--ply-layer-0);
}

.layer-1 {
  background-color: var(--ply-layer-1);
  box-shadow: var(--ply-shadow-1);
}

.layer-2 {
  background-color: var(--ply-layer-2);
  box-shadow: var(--ply-shadow-2);
}

.layer-3 {
  background-color: var(--ply-layer-3);
  box-shadow: var(--ply-shadow-3);
}

.shadow-1 {
  box-shadow: var(--ply-shadow-1);
}

.shadow-2 {
  box-shadow: var(--ply-shadow-2);
}

.shadow-3 {
  box-shadow: var(--ply-shadow-3);
}

// Opacity scales

$opacity-scale: (10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9);

@each $name, $value in $opacity-scale {
  .color-gray-#{$name}  { color: rgba(0, 0, 0, $value); }
  .color-white-#{$name} { color: rgba(255, 255, 255, $value); }
}

// Brand text colors (theme-aware)
.color-blue   { color: var(--ply-blue-1); }
.color-red    { color: var(--ply-red-1); }
.color-green  { color: var(--ply-green-1); }
.color-yellow { color: var(--ply-yellow-1); }