.notification {
  position: relative;
  z-index: 4000;

  /*
  This is targeting the internal Animator element that will get the dynamic
  `max-height` set by Animator. We set it as an anchor for the `position:absolute`
  bar element to stick to. Without it you will get the classic "fold" animation
  from animator.
  */
  & &__animator-content > * {
    position: relative;
  }

  & &__wrapper {
    position: relative;
  }

  & &__bar {
    position: absolute;
    bottom: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3px 12px;
    border: var(--wds-notification-border-width, var(--wds-border-width-none, 0))
      solid
      var(--wds-notification-border-color, var(--wds-color-white-transparent-0, transparent));
    border-radius: var(--wds-notification-border-radius, var(--wds-border-radius-0, 0));
  }

  &--skin-standard &__bar {
    background-color: var(
      --wds-notification-fill-standard,
      var(--wds-color-blue-200, var(--wsr-color-B20, #5999ff))
    );
  }

  &--skin-error &__bar {
    background-color: var(
      --wds-notification-fill-error,
      var(--wds-color-red-200, var(--wsr-color-R20, #ff6d63))
    );
  }

  &--skin-success &__bar {
    background-color: var(
      --wds-notification-fill-success,
      var(--wds-color-green-200, var(--wsr-color-G20, #51b77b))
    );
  }

  &--skin-warning &__bar {
    background-color: var(
      --wds-notification-fill-warning,
      var(--wds-color-yellow-100, var(--wsr-color-Y10, #ffb700))
    );
  }

  &--skin-premium &__bar {
    background-color: var(
      --wds-notification-fill-premium,
      var(--wds-color-purple-200, var(--wsr-color-P20, #c161f0))
    );
  }

  /* Positions */
  &--type-local &__animator {
    position: absolute;
    right: 0;
    left: 0;
  }

  &--type-global &__animator {
    position: relative;
    width: 100%;
  }

  &--type-sticky &__animator {
    position: fixed;
    right: 0;
    width: 100%;
    top: 0;
  }

  & &__label-wrapper {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  & &__label {
    max-width: 720px;
    margin-right: 12px;
    padding: 9px 0;
  }

  // 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-primary-light, var(--wsr-color-D80, #ffffff))
    );
  }

  & &__button {
    margin: 6px 0;
  }

  & &__text-link {
    margin: 8px 0;
  }

  // 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-primary-light, var(--wsr-color-D80, #ffffff))
    );
  }

  @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-primary-light, var(--wsr-color-D80, #ffffff))
      );
    }
  }

  & &__icon {
    color: var(
      --wds-notification-content-color,
      var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
    );
    margin-right: 12px;
    margin-top: 9px;
  }

  & &__close-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    display: flex;
    align-items: center;
  }

  & &__dismiss-button#{&}__dismiss-button,
  & &__dismiss-button#{&}__dismiss-button:active {
    color: var(
      --wds-notification-content-color,
      var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
    );
  }

  @media (hover: hover) {
    & &__dismiss-button#{&}__dismiss-button:hover {
      color: var(
        --wds-notification-content-color,
        var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
      );
    }
  }
}