/* #region Scroll Lock */
/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
@supports (scrollbar-gutter: stable) {
  .wa-scroll-lock {
    scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
  }

  .wa-scroll-lock body {
    overflow: hidden !important;
  }
}

/** This can go away once Safari has scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
  .wa-scroll-lock body {
    padding-right: var(--wa-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
/* #endregion */

/* #region Align Items */
.wa-align-items-start {
  align-items: flex-start;
}
.wa-align-items-end {
  align-items: flex-end;
}
.wa-align-items-center {
  align-items: center;
}
.wa-align-items-stretch {
  align-items: stretch;
}
.wa-align-items-baseline {
  align-items: baseline;
}
/* #endregion */

/* #region Border Radius */
.wa-border-radius-xs {
  border-radius: var(--wa-border-radius-xs);
}
.wa-border-radius-s {
  border-radius: var(--wa-border-radius-s);
}
.wa-border-radius-m {
  border-radius: var(--wa-border-radius-m);
}
.wa-border-radius-l {
  border-radius: var(--wa-border-radius-l);
}
.wa-border-radius-pill {
  border-radius: var(--wa-border-radius-pill);
}
.wa-border-radius-circle {
  border-radius: var(--wa-border-radius-circle);
}
.wa-border-radius-square {
  border-radius: var(--wa-border-radius-square);
}
/* #endregion */

/* #region Gap */
.wa-gap-0 {
  gap: 0px;
}
.wa-gap-3xs {
  gap: var(--wa-space-3xs);
}
.wa-gap-2xs {
  gap: var(--wa-space-2xs);
}
.wa-gap-xs {
  gap: var(--wa-space-xs);
}
.wa-gap-s {
  gap: var(--wa-space-s);
}
.wa-gap-m {
  gap: var(--wa-space-m);
}
.wa-gap-l {
  gap: var(--wa-space-l);
}
.wa-gap-xl {
  gap: var(--wa-space-xl);
}
.wa-gap-2xl {
  gap: var(--wa-space-2xl);
}
.wa-gap-3xl {
  gap: var(--wa-space-3xl);
}
/* #endregion */

/* #region Text */
.wa-heading-xs,
.wa-heading-s,
.wa-heading-m,
.wa-heading-l,
.wa-heading-xl,
.wa-heading-2xl,
.wa-heading-3xl {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  line-height: var(--wa-line-height-condensed);
  text-wrap: balance;
}

.wa-heading-xs {
  font-size: var(--wa-font-size-s);
}

.wa-heading-s {
  font-size: var(--wa-font-size-m);
}

.wa-heading-m {
  font-size: var(--wa-font-size-l);
}

.wa-heading-l {
  font-size: var(--wa-font-size-xl);
}

.wa-heading-xl {
  font-size: var(--wa-font-size-2xl);
}

.wa-heading-2xl {
  font-size: var(--wa-font-size-3xl);
}

.wa-heading-3xl {
  font-size: var(--wa-font-size-4xl);
}

.wa-body-xs,
.wa-body-s,
.wa-body-m,
.wa-body-l,
.wa-body-xl {
  font-family: var(--wa-font-family-body);
  font-weight: var(--wa-font-weight-body);
  line-height: var(--wa-line-height-normal);
}

.wa-body-xs {
  font-size: var(--wa-font-size-xs);
}

.wa-body-s {
  font-size: var(--wa-font-size-s);
}

.wa-body-m {
  font-size: var(--wa-font-size-m);
}

.wa-body-l {
  font-size: var(--wa-font-size-l);
}

.wa-body-xl {
  font-size: var(--wa-font-size-xl);
}

.wa-caption-xs,
.wa-caption-s,
.wa-caption-m,
.wa-caption-l,
.wa-caption-xl {
  color: var(--wa-color-text-quiet);
  font-family: var(--wa-font-family-body);
  font-weight: var(--wa-font-weight-body);
  line-height: var(--wa-line-height-condensed);
}

.wa-caption-xs {
  font-size: var(--wa-font-size-2xs);
}

.wa-caption-s {
  font-size: var(--wa-font-size-xs);
}

.wa-caption-m {
  font-size: var(--wa-font-size-s);
}

.wa-caption-l {
  font-size: var(--wa-font-size-m);
}

.wa-caption-xl {
  font-size: var(--wa-font-size-l);
}

/* #endregion */
