@use "../../foundations/helpers/forward.helpers.scss" as *;

.ds-direkt-header {
  background-color: $ds-color-brand-500;
  border-radius: ds-border-radius(050);
  color: $ds-color-text-primaryinvert;
  overflow: hidden;
  padding: ds-spacing($ds-s-100);

  .ds-direkt-header__pre-title,
  .ds-direkt-header__title,
  .ds-direkt-header__sub-title {
    margin: 0;
  }

  .ds-direkt-header__pre-title {
    align-items: center;
    display: flex;
    margin-bottom: ds-spacing($ds-s-050);
    @include ds-typography($ds-typography-functional-meta-md);
  }

  .ds-direkt-header__title {
    @include ds-typography($ds-typography-detail-direkt-header-v2);
  }

  .ds-direkt-header__sub-title {
    @include ds-typography($ds-typography-expressive-ingress-md, $fontWeight: $ds-fontweight-regular);
  }

  .ds-direkt-header__circle-wrapper {
    margin-right: ds-spacing($ds-s-075);
    padding-left: ds-spacing($ds-s-025);
    position: relative;
  }

  .ds-direkt-header__circle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}