@mixin component-notification {
  display: flex;
  border-radius: var(--#{$rd-prefix}border-radius);

  @each $theme, $rgb in $rd-themes {
    @include theme(#{$theme}) {
      @include e(icon) {
        color: var(--#{$rd-prefix}color-#{$theme});
      }
    }
  }

  @include e(icon) {
    flex-shrink: 0;
    margin-right: 16px;
    font-size: 1.75em;
  }

  @include e(content) {
    flex-grow: 1;
  }

  @include e(header) {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  @include e(title) {
    flex-grow: 1;
    font-size: 1.1em;
    font-weight: $rd-font-weight-bold;
  }

  @include e(description) {
    color: var(--#{$rd-prefix}text-color-sub);
  }

  @include e(header-actions) {
    @include polyfill-column-gap(4px);

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;

    .#{$rd-prefix}button {
      --#{$rd-prefix}size: 28px;
      --#{$rd-prefix}padding-size: 10px;
    }
  }

  @include e(close) {
    @include utils-button;

    padding: 0;
    margin: 0;
    color: rgb(var(--#{$rd-prefix}text-color-rgb) / 50%);
    background-color: transparent;
    border: none;
    transition: color var(--#{$rd-prefix}animation-duration-base) linear;

    &:hover,
    &:focus {
      color: var(--#{$rd-prefix}color-primary-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}color-primary-darker);
    }
  }
}