/* Container Properties */

.container {
  inline-size: 100%;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: var(--op-breakpoint-medium);
  padding-block: 0;
  padding-inline: var(--op-space-large);
}

.container--sm {
  max-inline-size: var(--op-breakpoint-small);
}

.container--md-padding {
  padding: 0 var(--op-space-medium);
}

.container--sm-padding {
  padding: 0 var(--op-space-small);
}

.container--xs {
  max-inline-size: var(--op-breakpoint-x-small);
}

/* Width Properties */

.full-width {
  inline-size: 100%;
}

.half-width {
  inline-size: 50%;
}

.four-fifths-width {
  inline-size: calc(100% * 4 / 5);
}

.three-fifths-width {
  inline-size: calc(100% * 3 / 5);
}

.two-fifths-width {
  inline-size: calc(100% * 2 / 5);
}

.one-fifth-width {
  inline-size: calc(100% * 1 / 5);
}

.three-quarters-width {
  inline-size: calc(100% * 3 / 4);
}

.one-quarter-width {
  inline-size: calc(100% * 1 / 4);
}

.two-thirds-width {
  inline-size: calc(100% * 2 / 3);
}

.one-third-width {
  inline-size: calc(100% * 1 / 3);
}

/* Flex Properties */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

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

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

.flex-grow-1 {
  flex-grow: 1;
}

/* Gap Properties */
.gap-none {
  gap: 0;

  --op-gap: 0;
}

.gap-xxs {
  gap: var(--op-space-2x-small);

  --op-gap: var(--op-space-2x-small);
}

.gap-xs {
  gap: var(--op-space-x-small);

  --op-gap: var(--op-space-x-small);
}

.gap-sm {
  gap: var(--op-space-small);

  --op-gap: var(--op-space-small);
}

.gap-md {
  gap: var(--op-space-medium);

  --op-gap: var(--op-space-medium);
}

.gap-lg {
  gap: var(--op-space-large);

  --op-gap: var(--op-space-large);
}

.gap-xl {
  gap: var(--op-space-x-large);

  --op-gap: var(--op-space-x-large);
}

/* Justify Content */

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

.justify-center {
  justify-content: center;
}

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

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

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

/* Align Items */

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

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

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

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

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

/* Align Self */

.self-auto {
  align-self: auto;
}

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

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

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

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

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

/* Text Alignment */

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

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

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

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

/* Box Margin */

.margin-xl {
  margin: var(--op-space-x-large);
}

.margin-lg {
  margin: var(--op-space-large);
}

.margin-md {
  margin: var(--op-space-medium);
}

.margin-sm {
  margin: var(--op-space-small);
}

.margin-xs {
  margin: var(--op-space-x-small);
}

.margin-none {
  margin: 0;
}

.margin-auto {
  margin: auto;
}

/* Vertical Margin */

.margin-y-xl {
  margin-block: var(--op-space-x-large);
}

.margin-y-lg {
  margin-block: var(--op-space-large);
}

.margin-y-md {
  margin-block: var(--op-space-medium);
}

.margin-y-sm {
  margin-block: var(--op-space-small);
}

.margin-y-xs {
  margin-block: var(--op-space-x-small);
}

.margin-y-none {
  margin-block: 0;
}

/* Horizontal Margin */

.margin-x-xl {
  margin-inline: var(--op-space-x-large);
}

.margin-x-lg {
  margin-inline: var(--op-space-large);
}

.margin-x-md {
  margin-inline: var(--op-space-medium);
}

.margin-x-sm {
  margin-inline: var(--op-space-small);
}

.margin-x-xs {
  margin-inline: var(--op-space-x-small);
}

.margin-x-none {
  margin-inline: 0;
}

/* Top Margin */

.margin-top-xl {
  margin-block-start: var(--op-space-x-large);
}

.margin-top-lg {
  margin-block-start: var(--op-space-large);
}

.margin-top-md {
  margin-block-start: var(--op-space-medium);
}

.margin-top-sm {
  margin-block-start: var(--op-space-small);
}

.margin-top-xs {
  margin-block-start: var(--op-space-x-small);
}

.margin-top-none {
  margin-block-start: 0;
}

/* Bottom Margin */

.margin-bottom-xl {
  margin-block-end: var(--op-space-x-large);
}

.margin-bottom-lg {
  margin-block-end: var(--op-space-large);
}

.margin-bottom-md {
  margin-block-end: var(--op-space-medium);
}

.margin-bottom-sm {
  margin-block-end: var(--op-space-small);
}

.margin-bottom-xs {
  margin-block-end: var(--op-space-x-small);
}

.margin-bottom-none {
  margin-block-end: 0;
}

/* Right Margin */

.margin-right-xl {
  margin-inline-end: var(--op-space-x-large);
}

.margin-right-lg {
  margin-inline-end: var(--op-space-large);
}

.margin-right-md {
  margin-inline-end: var(--op-space-medium);
}

.margin-right-sm {
  margin-inline-end: var(--op-space-small);
}

.margin-right-xs {
  margin-inline-end: var(--op-space-x-small);
}

.margin-right-none {
  margin-inline-start: 0;
}

/* Left Margin */

.margin-left-xl {
  margin-inline-start: var(--op-space-x-large);
}

.margin-left-lg {
  margin-inline-start: var(--op-space-large);
}

.margin-left-md {
  margin-inline-start: var(--op-space-medium);
}

.margin-left-sm {
  margin-inline-start: var(--op-space-small);
}

.margin-left-xs {
  margin-inline-start: var(--op-space-x-small);
}

.margin-left-none {
  margin-inline-start: 0;
}

/*
  Accessibility
  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.sr-only {
  position: absolute !important;
  overflow: hidden;
  block-size: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
}

/* Advanced Layout Utilities */

/* Equivalent to .flex.flex-col.gap-md */
.op-stack {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    gap: var(--op-space-medium);
  }
}

/* Equivalent to .flex.flex-wrap.items-center.gap-md */
.op-cluster {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    align-items: center;
    gap: var(--op-space-medium);
  }
}

/* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
.op-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    align-items: center;
    gap: var(--op-space-medium);
  }
}

/*
  side by side layout with a small area and a large area
  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.

  |[] [         ]|
  |[         ] []| with end
*/
.op-flank {
  display: flex;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-space-medium);
  }

  /* Small area */
  &:not(.op-flank--end) > :first-child,
  &.op-flank--end > :last-child {
    flex-basis: auto;
    flex-grow: 1;
  }

  /* Large area */
  &:not(.op-flank--end) > :last-child,
  &.op-flank--end > :first-child {
    flex-basis: 0;
    flex-grow: 999;
  }
}

/* Grid Layout */
.op-grid {
  --_op-grid-min-column-size: var(--op-space-4x-large);
  --_op-grid-max-column-size: 0px;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
  );
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    gap: var(--op-space-medium);
  }

  &.op-grid--2-column {
    --_op-grid-max-column-size: calc(100% / 3);
  }

  &.op-grid--3-column {
    --_op-grid-max-column-size: calc(100% / 4);
  }

  &.op-grid--4-column {
    --_op-grid-max-column-size: calc(100% / 5);
  }

  &.op-grid--5-column {
    --_op-grid-max-column-size: calc(100% / 6);
  }

  &.op-grid--6-column {
    --_op-grid-max-column-size: calc(100% / 7);
  }
}

/* Frame */
@property --_op-frame-inline-size {
  inherits: true;
  initial-value: 100%;
  syntax: '<length> | <percentage>';
}

.op-frame {
  display: flex;
  overflow: hidden;
  border-radius: inherit;
  aspect-ratio: 1 / 1;
  margin-block: 0;
  margin-inline: 0;
  max-inline-size: var(--_op-frame-inline-size);

  :where(&) {
    align-items: center;
    justify-content: center;
  }

  > img,
  > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  /* aspect ratio */

  &.op-frame--square {
    aspect-ratio: 1 / 1;
  }

  &.op-frame--landscape {
    aspect-ratio: 16 / 9;
  }

  &.op-frame--portrait {
    aspect-ratio: 9 / 16;
  }

  &.op-frame--4-3 {
    aspect-ratio: 4 / 3;
  }

  &.op-frame--3-4 {
    aspect-ratio: 3 / 4;
  }

  &.op-frame--3-2 {
    aspect-ratio: 3 / 2;
  }

  &.op-frame--2-3 {
    aspect-ratio: 2 / 3;
  }
}