.hds-icon {
  background-color: currentcolor;
  display: inline-block;
  height: var(--icon-size);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto;
  mask-size: auto;
  width: var(--icon-size);
}

.hds-icon--size-xs {
  --icon-size: var(--spacing-layout-2-xs);
}

.hds-icon--size-s {
  --icon-size: var(--spacing-layout-xs);
}

.hds-icon--size-m {
  --icon-size: var(--spacing-layout-s);
}

.hds-icon--size-l {
  --icon-size: var(--spacing-layout-m);
}

.hds-icon--size-xl {
  --icon-size: var(--spacing-layout-l);
}

[class*=hds-icon-start--]:before {
  background-color: currentcolor;
  content: "";
  display: inline-flex;
  height: var(--icon-size, 24px);
  -webkit-mask-image: var(--mask-image-before);
  mask-image: var(--mask-image-before);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: var(--icon-size, 24px);
}

[class*=hds-icon-end--]:after {
  background-color: currentcolor;
  content: "";
  display: inline-flex;
  height: var(--icon-size, 24px);
  -webkit-mask-image: var(--mask-image-after);
  mask-image: var(--mask-image-after);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: var(--icon-size, 24px);
}

.hds-icon--alert-circle-fill {
  --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
  --mask-image: var(--mask-image-alert-circle-fill);
}

.hds-icon-start--alert-circle-fill {
  --mask-image-before: var(--mask-image-alert-circle-fill);
}

.hds-icon-end--alert-circle-fill {
  --mask-image-after: var(--mask-image-alert-circle-fill);
}

.hds-icon--check-circle-fill {
  --mask-image-check-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
  --mask-image: var(--mask-image-check-circle-fill);
}

.hds-icon-start--check-circle-fill {
  --mask-image-before: var(--mask-image-check-circle-fill);
}

.hds-icon-end--check-circle-fill {
  --mask-image-after: var(--mask-image-check-circle-fill);
}

.hds-icon--error-fill {
  --mask-image-error-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
  --mask-image: var(--mask-image-error-fill);
}

.hds-icon-start--error-fill {
  --mask-image-before: var(--mask-image-error-fill);
}

.hds-icon-end--error-fill {
  --mask-image-after: var(--mask-image-error-fill);
}

.hds-icon--info-circle-fill {
  --mask-image-info-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
  --mask-image: var(--mask-image-info-circle-fill);
}

.hds-icon-start--info-circle-fill {
  --mask-image-before: var(--mask-image-info-circle-fill);
}

.hds-icon-end--info-circle-fill {
  --mask-image-after: var(--mask-image-info-circle-fill);
}

.hds-notification {
  --notification-background-color: var(--color-info-light);
  --notification-border-color: var(--color-info);
  --notification-border-width: var(--spacing-2-xs);
  --notification-icon-color: var(--color-info);
  --notification-color: var(--color-black-90);
  --notification-max-width-inline: none;
  --notification-max-width-toast: 21rem;
  --notification-z-index-inline: auto;
  --notification-z-index-toast: 99;
  --notification-offset: var(--spacing-layout-s);
  --notification-padding: var(--spacing-s);
  background-color: var(--notification-background-color);
  border: solid var(--notification-border-color);
  border-width: 0 0 0 var(--notification-border-width);
  box-sizing: border-box;
  color: var(--notification-color);
  max-width: var(--notification-max-width-inline);
  padding: var(--notification-padding);
  position: relative;
  width: 100%;
  z-index: var(--notification-z-index-inline);
}

.hds-notification__content {
  display: grid;
  gap: var(--spacing-2-xs);
}

.hds-notification .hds-link {
  color: inherit;
  justify-self: flex-start;
}

.hds-notification__label {
  align-items: center;
  display: flex;
  font-size: var(--fontsize-heading-xxs);
  font-weight: bold;
  letter-spacing: 0;
  line-height: 24px;
  margin-right: var(--spacing-l);
}

.hds-notification .hds-icon {
  --icon-size: var(--spacing-layout-xs);
}

.hds-notification__label > .hds-icon {
  color: var(--notification-icon-color);
  flex: none;
  margin-right: var(--spacing-2-xs);
}

.hds-notification__body {
  font-size: var(--fontsize-body-m);
  line-height: 24px;
}

.hds-notification__close-button {
  --notification-close-button-offset: var(--spacing-s);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  outline: none;
  padding: 0;
  position: absolute;
  right: var(--notification-close-button-offset);
  top: var(--notification-close-button-offset);
}

.hds-notification__close-button:focus {
  box-shadow: 0 0 0 3px var(--color-focus-outline);
}

.hds-notification--small {
  --notification-padding: var(--spacing-2-xs);
}

.hds-notification--small .hds-notification__content {
  display: flex;
  gap: 0;
}

.hds-notification--small .hds-notification__label {
  margin-right: 0;
}

.hds-notification--small .hds-notification__body {
  margin-right: var(--spacing-l);
}

.hds-notification--small .hds-notification__close-button {
  --notification-close-button-offset: var(--spacing-2-xs);
}

.hds-notification--large {
  --notification-padding: var(--spacing-l);
}

.hds-notification--large .hds-notification__label {
  margin-right: 0;
}

.hds-notification--large .hds-notification__close-button {
  --notification-close-button-offset: var(--spacing-2-xs);
}

.hds-notification--top-left, .hds-notification--top-center, .hds-notification--top-right, .hds-notification--bottom-left, .hds-notification--bottom-center, .hds-notification--bottom-right {
  border-width: var(--notification-border-width) 0 0;
  max-width: var(--notification-max-width-toast);
  position: fixed;
  width: calc(100% - var(--spacing-l));
  z-index: var(--notification-z-index-toast);
}

.hds-notification--top-left {
  left: var(--notification-offset);
  top: var(--notification-offset);
}

.hds-notification--top-center {
  left: 50%;
  top: var(--notification-offset);
  transform: translateX(-50%);
}

.hds-notification--top-right {
  right: var(--notification-offset);
  top: var(--notification-offset);
}

.hds-notification--bottom-left {
  bottom: var(--notification-offset);
  left: var(--notification-offset);
}

.hds-notification--bottom-center {
  bottom: var(--notification-offset);
  left: 50%;
  transform: translateX(-50%);
}

.hds-notification--bottom-right {
  bottom: var(--notification-offset);
  right: var(--notification-offset);
}

@media only screen and (max-width: 765.98px) {
  .hds-notification {
    --notification-offset: var(--spacing-s);
  }
}

.hds-notification--success {
  --notification-background-color: var(--color-success-light);
  --notification-border-color: var(--color-success);
  --notification-icon-color: var(--color-success);
}

.hds-notification--alert {
  --notification-background-color: var(--color-alert-light);
  --notification-border-color: var(--color-alert-dark);
  --notification-icon-color: var(--color-alert-dark);
}

.hds-notification--error {
  --notification-background-color: var(--color-error-light);
  --notification-border-color: var(--color-error);
  --notification-icon-color: var(--color-error);
}

.hds-notification--error .hds-notification__label:focus {
  outline: 3px solid var(--color-coat-of-arms);
}

.hds-notification--error .hds-notification__body ul {
  margin: 0;
  padding: 0 0 0 var(--spacing-s);
}

.hds-notification--error .hds-notification__body li {
  margin-bottom: 0.125rem;
}

.hds-notification--error .hds-notification__body li a {
  color: var(--color-bus);
}

.hds-notification--box-shadow {
  box-shadow: var(--box-shadow-l);
}