@telekom/scale-components/dist/collection/components/callout/callout.css

Scale is the digital design system for Telekom products and experiences.

:host {
  --position: absolute;
  --background: var(--telekom-color-ui-extra-strong);
  --color: var(--telekom-color-text-and-icon-inverted-standard);
  --spacing: var(--telekom-spacing-composition-space-10);
  --min-width: 6rem;
  --aspect-ratio: 1 / 1;
  --rotation: 0deg;
  --font-small: var(--telekom-text-style-body-bold);
  --font-medium: var(--telekom-text-style-body-bold);
  --font-large: var(--telekom-text-style-heading-1);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  position: var(--position);
  background: var(--background);
  color: var(--color);
  min-width: var(--min-width);
  aspect-ratio: var(--aspect-ratio);
  /* needed for browsers not supporting aspect-ratio */
  min-height: var(--min-width);
  transform: rotateZ(var(--rotation, 0deg));
}

[part='base'] {
  box-sizing: border-box;
  padding: var(--spacing);
  font: var(--font-medium);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  [part='base'] {
    border: 1px solid;
  }
}

/* Color variants */

:host([variant='primary']) {
  --background: var(--telekom-color-primary-standard);
  --color: var(--telekom-color-text-and-icon-white-standard);
}

:host([variant='black']) {
  --background: var(--telekom-color-ui-black, #000000);
  --color: var(--telekom-color-text-and-icon-white-standard);
}

:host([variant='white']) {
  --background: var(--telekom-color-ui-white, #ffffff);
  --color: var(--telekom-color-text-and-icon-black-standard);
}

:host([variant='blue']) {
  --background: var(--telekom-color-additional-cyan-100);
  --color: var(--telekom-color-text-and-icon-black-standard);
}

/* Enforce "line break" for every direct child of scale-callout */

::slotted(*) {
  display: block;
}

/* Font style options (medium is default) */

::slotted(.scl-callout-text-small) {
  font: var(--font-small);
}

::slotted(.scl-callout-text-large) {
  font: var(--font-large);
}