/* elements_addons.css */

/* structure */

.add_block {
  display: block;
  min-width: 0;
}

.add_grid {
  display: grid;
  min-width: 0;
  gap: var(--child-spacing-y) var(--child-spacing-x);
  padding: var(--child-padding-y) var(--child-padding-x);
}

.add_tostack {
  width: 100%;
  min-width: 0;
}

.add_stackspace-hor {
  padding-left: var(--padding-fluid-xxl);
  padding-right: var(--padding-fluid-xxl);
}

.add_stackspace-ver {
  padding-top: var(--padding-fluid-l);
  padding-bottom: var(--padding-fluid-l);
}

/* typography modifiers */

.add_modern {
  font-family: var(--fontfamily-modern);
}

.add_traditional {
  font-family: var(--fontfamily-traditional);
}

.add_uppercase {
  text-transform: uppercase;
}

.add_weight-regular {
  font-weight: var(--fontweight-regular);
}

.add_weight-medium {
  font-weight: var(--fontweight-medium);
}

.add_weight-semibold {
  font-weight: var(--fontweight-semibold);
}

.add_weight-bold {
  font-weight: var(--fontweight-bold);
}

.add_weight-heavy {
  font-weight: var(--fontweight-heavy);
}

/* width */

.add_width-sm {
  max-width: var(--width-xxl);
}

.add_width-lg {
  max-width: var(--width-max);
}

/* card */

.add_card {
  border-radius: var(--radius-sm);
}

/* borders */

.add_border-thin {
  border-width: var(--line-thin);
  border-style: solid;
}

.add_border-light {
  border-width: var(--line-thin);
  border-style: solid;
}

.add_border-soft {
  border-width: var(--line-thin);
  border-style: solid;
}

.add_palette-translight .add_border-thin,
.add_palette-translight.add_border-thin {
  border-color: var(--color-default-extralight);
}

.add_palette-translight .add_border-light,
.add_palette-translight.add_border-light {
  border-color: var(--color-default-regular);
}

.add_palette-translight .add_border-soft,
.add_palette-translight.add_border-soft {
  border-color: var(--color-default-dark);
}

.add_palette-transgrey .add_border-thin,
.add_palette-transgrey.add_border-thin {
  border-color: var(--color-default-dark);
}

.add_palette-transgrey .add_border-light,
.add_palette-transgrey.add_border-light {
  border-color: var(--color-default-light);
}

.add_palette-transgrey .add_border-soft,
.add_palette-transgrey.add_border-soft {
  border-color: var(--color-default-colorful);
}

.add_palette-transcolor .add_border-thin,
.add_palette-transcolor.add_border-thin {
  border-color: var(--color-dark);
}

.add_palette-transcolor .add_border-light,
.add_palette-transcolor.add_border-light {
  border-color: var(--color-light);
}

.add_palette-transcolor .add_border-soft,
.add_palette-transcolor.add_border-soft {
  border-color: var(--color-colorful);
}

.add_palette-blackgrey .add_border-thin,
.add_palette-blackgrey.add_border-thin {
  border-color: var(--color-default-extralight);
}

.add_palette-blackgrey .add_border-light,
.add_palette-blackgrey.add_border-light {
  border-color: var(--color-default-dark);
}

.add_palette-blackgrey .add_border-soft,
.add_palette-blackgrey.add_border-soft {
  border-color: var(--color-default-colorful);
}

.add_palette-blackcolor .add_border-thin,
.add_palette-blackcolor.add_border-thin {
  border-color: var(--color-extralight);
}

.add_palette-blackcolor .add_border-light,
.add_palette-blackcolor.add_border-light {
  border-color: var(--color-dark);
}

.add_palette-blackcolor .add_border-soft,
.add_palette-blackcolor.add_border-soft {
  border-color: var(--color-colorful);
}

.add_palette-white .add_border-thin,
.add_palette-white.add_border-thin,
.add_palette-whitegrey .add_border-thin,
.add_palette-whitegrey.add_border-thin {
  border-color: var(--color-default-extradark);
}

.add_palette-white .add_border-light,
.add_palette-white.add_border-light,
.add_palette-whitegrey .add_border-light,
.add_palette-whitegrey.add_border-light {
  border-color: var(--color-default-light);
}

.add_palette-white .add_border-soft,
.add_palette-white.add_border-soft,
.add_palette-whitegrey .add_border-soft,
.add_palette-whitegrey.add_border-soft {
  border-color: var(--color-default-colorful);
}

.add_palette-whitecolor .add_border-thin,
.add_palette-whitecolor.add_border-thin {
  border-color: var(--color-extradark);
}

.add_palette-whitecolor .add_border-light,
.add_palette-whitecolor.add_border-light {
  border-color: var(--color-light);
}

.add_palette-whitecolor .add_border-soft,
.add_palette-whitecolor.add_border-soft {
  border-color: var(--color-colorful);
}

.add_palette-extradarkgrey .add_border-thin,
.add_palette-extradarkgrey.add_border-thin {
  border-color: var(--color-default-extralight);
}

.add_palette-extradarkgrey .add_border-light,
.add_palette-extradarkgrey.add_border-light {
  border-color: var(--color-default-dark);
}

.add_palette-extradarkgrey .add_border-soft,
.add_palette-extradarkgrey.add_border-soft {
  border-color: var(--color-default-colorful);
}

.add_palette-extradarkcolor .add_border-thin,
.add_palette-extradarkcolor.add_border-thin {
  border-color: var(--color-extralight);
}

.add_palette-extradarkcolor .add_border-light,
.add_palette-extradarkcolor.add_border-light {
  border-color: var(--color-dark);
}

.add_palette-extradarkcolor .add_border-soft,
.add_palette-extradarkcolor.add_border-soft {
  border-color: var(--color-colorful);
}

.add_palette-extralightgrey .add_border-thin,
.add_palette-extralightgrey.add_border-thin {
  border-color: var(--color-default-extradark);
}

.add_palette-extralightgrey .add_border-light,
.add_palette-extralightgrey.add_border-light {
  border-color: var(--color-default-light);
}

.add_palette-extralightgrey .add_border-soft,
.add_palette-extralightgrey.add_border-soft {
  border-color: var(--color-default-colorful);
}

.add_palette-extralight .add_border-thin,
.add_palette-extralight.add_border-thin,
.add_palette-extralightcolor .add_border-thin,
.add_palette-extralightcolor.add_border-thin {
  border-color: var(--color-extradark);
}

.add_palette-extralight .add_border-light,
.add_palette-extralight.add_border-light,
.add_palette-extralightcolor .add_border-light,
.add_palette-extralightcolor.add_border-light {
  border-color: var(--color-light);
}

.add_palette-extralight .add_border-soft,
.add_palette-extralight.add_border-soft,
.add_palette-extralightcolor .add_border-soft,
.add_palette-extralightcolor.add_border-soft {
  border-color: var(--color-colorful);
}

/* offset line */

.add_offset-line {
  padding-left: calc(var(--padding-md) + 0.15em);
  border-left-width: var(--line-bold);
  border-left-style: solid;
}

.add_palette-translight .add_offset-line,
.add_palette-translight.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-transgrey .add_offset-line,
.add_palette-transgrey.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-transcolor .add_offset-line,
.add_palette-transcolor.add_offset-line {
  border-left-color: var(--color-colorful);
}

.add_palette-blackgrey .add_offset-line,
.add_palette-blackgrey.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-blackcolor .add_offset-line,
.add_palette-blackcolor.add_offset-line {
  border-left-color: var(--color-colorful);
}

.add_palette-white .add_offset-line,
.add_palette-white.add_offset-line,
.add_palette-whitegrey .add_offset-line,
.add_palette-whitegrey.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-whitecolor .add_offset-line,
.add_palette-whitecolor.add_offset-line {
  border-left-color: var(--color-colorful);
}

.add_palette-extradarkgrey .add_offset-line,
.add_palette-extradarkgrey.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-extradarkcolor .add_offset-line,
.add_palette-extradarkcolor.add_offset-line {
  border-left-color: var(--color-colorful);
}

.add_palette-extralightgrey .add_offset-line,
.add_palette-extralightgrey.add_offset-line {
  border-left-color: var(--color-default-colorful);
}

.add_palette-extralight .add_offset-line,
.add_palette-extralight.add_offset-line,
.add_palette-extralightcolor .add_offset-line,
.add_palette-extralightcolor.add_offset-line {
  border-left-color: var(--color-colorful);
}

/* child spacing */

.add_childspacing-micro,
.add_childspacing-x-micro {
  --child-spacing-x: var(--space-2xs);
}

.add_childspacing-micro,
.add_childspacing-y-micro {
  --child-spacing-y: var(--space-2xs);
}

.add_childspacing-small,
.add_childspacing-x-small {
  --child-spacing-x: var(--space-sm);
}

.add_childspacing-small,
.add_childspacing-y-small {
  --child-spacing-y: var(--space-sm);
}

.add_childspacing-medium,
.add_childspacing-x-medium {
  --child-spacing-x: var(--space-lg);
}

.add_childspacing-medium,
.add_childspacing-y-medium {
  --child-spacing-y: var(--space-lg);
}

.add_childspacing-large,
.add_childspacing-x-large {
  --child-spacing-x: var(--space-xl);
}

.add_childspacing-large,
.add_childspacing-y-large {
  --child-spacing-y: var(--space-xl);
}

.add_childspacing-xl,
.add_childspacing-x-xl {
  --child-spacing-x: var(--space-3xl);
}

.add_childspacing-xl,
.add_childspacing-y-xl {
  --child-spacing-y: var(--space-3xl);
}

.add_childspacing-xxl,
.add_childspacing-x-xxl {
  --child-spacing-x: var(--space-4xl);
}

.add_childspacing-xxl,
.add_childspacing-y-xxl {
  --child-spacing-y: var(--space-4xl);
}

/* child padding */

.add_childpadding-micro,
.add_childpadding-x-micro {
  --child-padding-x: var(--padding-xs);
}

.add_childpadding-micro,
.add_childpadding-y-micro {
  --child-padding-y: var(--padding-xs);
}

.add_childpadding-small,
.add_childpadding-x-small {
  --child-padding-x: var(--padding-sm);
}

.add_childpadding-small,
.add_childpadding-y-small {
  --child-padding-y: var(--padding-sm);
}

.add_childpadding-medium,
.add_childpadding-x-medium {
  --child-padding-x: var(--padding-md);
}

.add_childpadding-medium,
.add_childpadding-y-medium {
  --child-padding-y: var(--padding-md);
}

.add_childpadding-large,
.add_childpadding-x-large {
  --child-padding-x: var(--padding-lg);
}

.add_childpadding-large,
.add_childpadding-y-large {
  --child-padding-y: var(--padding-lg);
}

.add_childpadding-xl,
.add_childpadding-x-xl {
  --child-padding-x: var(--padding-xl);
}

.add_childpadding-xl,
.add_childpadding-y-xl {
  --child-padding-y: var(--padding-xl);
}

.add_childpadding-xxl,
.add_childpadding-x-xxl {
  --child-padding-x: var(--padding-xxl);
}

.add_childpadding-xxl,
.add_childpadding-y-xxl {
  --child-padding-y: var(--padding-xxl);
}

.add_childpadding-fluid-l,
.add_childpadding-x-fluid-l {
  --child-padding-x: var(--padding-fluid-l);
}

.add_childpadding-fluid-l,
.add_childpadding-y-fluid-l {
  --child-padding-y: var(--padding-fluid-l);
}

.add_childpadding-fluid-xl,
.add_childpadding-x-fluid-xl {
  --child-padding-x: var(--padding-fluid-xl);
}

.add_childpadding-fluid-xl,
.add_childpadding-y-fluid-xl {
  --child-padding-y: var(--padding-fluid-xl);
}

.add_childpadding-fluid-xxl,
.add_childpadding-x-fluid-xxl {
  --child-padding-x: var(--padding-fluid-xxl);
}

.add_childpadding-fluid-xxl,
.add_childpadding-y-fluid-xxl {
  --child-padding-y: var(--padding-fluid-xxl);
}

.add_childpadding-fluid-3xl,
.add_childpadding-x-fluid-3xl {
  --child-padding-x: var(--padding-fluid-3xl);
}

.add_childpadding-fluid-3xl,
.add_childpadding-y-fluid-3xl {
  --child-padding-y: var(--padding-fluid-3xl);
}

/* layout */

.add_layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: var(--child-spacing-y) var(--child-spacing-x);
}

.add_layout-equal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

.add_layout-thirds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--child-spacing-y) var(--child-spacing-x);
  min-width: 0;
}

html.is-portrait .add_layout-split,
html.is-portrait .add_layout-equal,
html.is-portrait .add_layout-thirds {
  grid-template-columns: 1fr;
}

.add_align-center {
  justify-items: center;
  text-align: center;
}

.add_align-end {
  justify-self: end;
  text-align: right;
}

.add_span-full {
  grid-column: 1 / -1;
}

html.is-portrait .add_span-full {
  grid-column: auto;
}

.add_narrow {
  max-width: 66vw;
}