.notification {
  & &__bar {
    border: var(--wds-notification-border-width, var(--wds-border-width-100, 1px))
      solid
      var(--wds-notification-border-color, var(--wds-color-white, #ffffff));
    border-radius: var(--wds-notification-border-radius, var(--wds-border-radius-400, 8px));
  }

  &--skin-standard &__bar {
    background-color: var(
      --wds-notification-fill-standard,
      var(--wds-color-blue-400, #d5dfff)
    );
  }

  &--skin-error &__bar {
    background-color: var(
      --wds-notification-fill-error,
      var(--wds-color-red-400, #f4b8b9)
    );
  }

  &--skin-success &__bar {
    background-color: var(
      --wds-notification-fill-success,
      var(--wds-color-green-400, #daf3c0)
    );
  }

  &--skin-warning &__bar {
    background-color: var(
      --wds-notification-fill-warning,
      var(--wds-color-yellow-400, #fdead2)
    );
  }

  &--skin-premium &__bar {
    background-color: var(
      --wds-notification-fill-premium,
      var(--wds-color-iris-500, #e7e4fe)
    );
  }

  // doubled: dropping this re-ties Text's compiled `.root:skin(standard)`, and the label silently reverts to Text's own colour once Text migrates off Stylable
  & &__label-text#{&}__label-text {
    color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
  }

  // doubled: dropping this re-ties TextButton's compiled `.root:skin(light)`, and the link silently reverts to TextButton's own colour once TextButton migrates off Stylable
  & &__text-link#{&}__text-link,
  & &__text-link#{&}__text-link:active {
    color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
  }

  @media (hover: hover) {
    // doubled: dropping this re-ties TextButton's compiled `.root:skin(light):hover`, and the link silently reverts to TextButton's own hover colour once TextButton migrates off Stylable
    & &__text-link#{&}__text-link:hover {
      color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
    }
  }

  & &__icon {
    color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
  }

  & &__dismiss-button#{&}__dismiss-button,
  & &__dismiss-button#{&}__dismiss-button:active {
    color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
  }

  @media (hover: hover) {
    & &__dismiss-button#{&}__dismiss-button:hover {
      color: var(--wds-notification-content-color, var(--wds-color-text-standard-secondary, #383838));
    }
  }
}