/*** LEVEL: ELEMENTS ***/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--uimc-font-family-text);
  font-size: var(--uimc-font-size-medium);
  line-height: var(--uimc-line-height-medium);
  font-weight: var(--uimc-font-weight-regular);
  color: var(--uimc-color-text);
}

a {
  text-decoration: underline solid var(--uimc-link-underline-thickness-1) var(--uimc-link-underline-color);
  text-underline-offset: var(--uimc-link-underline-offset);
  color: var(--uimc-interaction-color-text-default);
  font-feature-settings: "liga" off, "clig" off;
  display: inline;
  padding: 0;
}

a:hover {
  text-decoration: underline solid var(--uimc-link-underline-thickness-2) var(--uimc-link-underline-color-hover);
  text-underline-offset: calc(var(--uimc-link-underline-offset) - calc(var(--uimc-link-underline-thickness-2) - var(--uimc-link-underline-thickness-1)));
}

a:focus-visible {
  color: var(--uimc-interaction-color-text-focus);
  outline: none;
  background-color: var(--uimc-interaction-color-background-focus);
  box-shadow: -0.125em 0 0 var(--uimc-interaction-color-background-focus), 0.125em 0 0 0 var(--uimc-interaction-color-background-focus);
  text-decoration: none;
}

p {
  font-size: inherit;
  line-height: inherit;
}

h1 {
  font-size: var(--uimc-font-size-h1);
  line-height: var(--uimc-line-height-h1);
}

h2 {
  font-size: var(--uimc-font-size-h2);
  line-height: var(--uimc-line-height-h2);
}

h3 {
  font-size: var(--uimc-font-size-h3);
  line-height: var(--uimc-line-height-h3);
}

h4 {
  font-size: var(--uimc-font-size-h4);
  line-height: var(--uimc-line-height-h4);
}

h5 {
  font-size: var(--uimc-font-size-h5);
  line-height: var(--uimc-line-height-h5);
}

h6 {
  font-size: var(--uimc-font-size-h6);
  line-height: var(--uimc-line-height-h6);
}

h1,
h2 {
  font-family: var(--uimc-font-family-headline);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--uimc-color-headline);
  font-weight: var(--uimc-font-weight-bold);
}

img, video, picture {
  aspect-ratio: var(--aspect-ratio); /* predefine aspect ratio for images as custom property*/
  display: block;
  max-height: var(--max-height); /* predefine max height for images as custom property */
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
}

/* Lists */
/* enhance the global style also for the slotted <li> */
ul {
  padding: 0;

  li {
    margin-inline-start: 1rem; /* bullet position */
    padding-inline-start: 2px; /* text position */
    margin-block: var(--uimc-spacing-2); /* gap between items */
  }
}

ui-marcom-list[variant=ordered],
ol {
  padding: 0;
  counter-reset: list;

  li {
    list-style-type: none;
    counter-increment: list;
    margin-inline-start: 0rem; /* bullet position */
    padding-inline-start: calc(var(--uimc-spacing-6) - 1.4rem); /* text position */
    margin-block: var(--uimc-spacing-2); /* gap between items */
  }

  li::before {
    font-size: .875em;
    content: counter(list) ' ';
    display: inline-block;
    text-indent: 0;
    margin-right: var(--uimc-spacing-2);
    width: 1rem;
  }
}

.font-size-xxsmall {
  font-size: var(--uimc-font-size-xxsmall) !important;
  line-height: var(--uimc-line-height-xxsmall) !important;
}

.font-size-xsmall {
  font-size: var(--uimc-font-size-xsmall) !important;
  line-height: var(--uimc-line-height-xsmall) !important;
}

.font-size-small {
  font-size: var(--uimc-font-size-small) !important;
  line-height: var(--uimc-line-height-small) !important;
}

.font-size-medium {
  font-size: var(--uimc-font-size-medium) !important;
  line-height: var(--uimc-line-height-medium) !important;
}

.font-size-large {
  font-size: var(--uimc-font-size-large) !important;
  line-height: var(--uimc-line-height-large) !important;
}

.font-size-xlarge {
  font-size: var(--uimc-font-size-xlarge) !important;
  line-height: var(--uimc-line-height-xlarge) !important;
}

.font-size-xxlarge {
  font-size: var(--uimc-font-size-xxlarge) !important;
  line-height: var(--uimc-line-height-xxlarge) !important;
}

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

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

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