@use 'cursors';
@use "colors";
@use "mixins";
@use "variables";

/* =Helpers (Core)
-----------------------------------------------------------------------------*/

// Layout Helpers
// Positioning

.full-screen {
  @include mixins.square;

  position: relative;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

// Display

.display-flex {
  display: flex;
}

.display-block {
  display: block;
}

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

.display-grid {
  display: grid;
}

.display-none {
  display: none;
}

// Spacing

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

.pause {
  margin-bottom: variables.$base-line * 0.5 !important;
}

.end {
  margin-bottom: 0 !important;
}

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

.margin-top {
  margin-top: var(--ply-space-md, 0.75rem);
}

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

.margin-right {
  margin-right: var(--ply-space-md, 0.75rem);
}

.margin-bottom {
  margin-bottom: var(--ply-space-md, 0.75rem);
}

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

.margin-left {
  margin-left: var(--ply-space-md, 0.75rem);
}

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

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

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

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

.no-spacing {
  margin: 0 !important;
  padding: 0 !important;
}

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

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

.padding-top {
  padding-top: var(--ply-space-md, 0.75rem);
}

.padding-right {
  padding-right: var(--ply-space-md, 0.75rem);
}

.padding-bottom {
  padding-bottom: var(--ply-space-md, 0.75rem);
}

.padding-left {
  padding-left: var(--ply-space-md, 0.75rem);
}

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

// Borders

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

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

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

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

// Width (base only — no responsive variants in core)

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

// UI Helpers

.group,
.clearfix {
  @include mixins.clearfix;
}

.hide {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hide-on-desktop {
  display: none;
}

.flat-list {
  margin-left: 0;
  list-style: none;
}

.border-radius {
  border-radius: var(--ply-border-radius);
}

// UX Helpers

.req,
.required {
  font-weight: normal;
  color: var(--ply-color-error);
}

.error {
  color: var(--ply-color-error);
}

.success {
  color: var(--ply-color-success);
}

// Typography — Size Utilities

.text-xs {
  font-size: variables.$font-size-xs;
  line-height: variables.$line-height-xs;
}

.text-sm {
  font-size: variables.$font-size-sm;
  line-height: variables.$line-height-sm;
}

.text-base {
  font-size: variables.$font-size-base;
  line-height: variables.$line-height-base;
}

.text-lg {
  font-size: variables.$font-size-lg;
  line-height: variables.$line-height-lg;
}

.text-xl {
  font-size: variables.$font-size-xl;
  line-height: variables.$line-height-xl;
}

.text-2xl {
  font-size: variables.$font-size-2xl;
  line-height: variables.$line-height-2xl;
}

.text-3xl {
  font-size: variables.$font-size-3xl;
  line-height: variables.$line-height-3xl;
}

.text-4xl {
  font-size: variables.$font-size-4xl;
  line-height: variables.$line-height-4xl;
}

.text-5xl {
  font-size: variables.$font-size-5xl;
  line-height: variables.$line-height-5xl;
}

// Typography — Weight Utilities

.font-normal    { font-weight: variables.$font-weight-normal; }
.font-medium    { font-weight: variables.$font-weight-medium; }
.font-semibold  { font-weight: variables.$font-weight-semibold; }
.font-bold      { font-weight: variables.$font-weight-bold; }

// Typography — Line Height Utilities

.leading-tight   { line-height: variables.$line-height-tight; }
.leading-snug    { line-height: variables.$line-height-snug; }
.leading-normal  { line-height: variables.$line-height-normal; }
.leading-relaxed { line-height: variables.$line-height-relaxed; }

// Typography — Legacy

.bold {
  font-weight: bold !important;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.nowrap,
.nowrap td {
  white-space: nowrap;
}

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

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

// Color Helpers

.bg-white,
.bg-surface {
  background-color: var(--ply-bg-surface);
}

.bg-black {
  background-color: colors.$color-black;
}

.color-black {
  color: colors.$color-black;
}

.color-white {
  color: colors.$color-white;
}

/* =Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .left,
  .right {
    float: none;
  }
  .hide-on-mobile {
    display: none;
  }
  .hide-on-desktop {
    display: block;
  }
}