@layer components {
  .notifications-help {
    h2 {
      font-size: var(--op-font-medium);
      margin: 0;
    }

    .icon {
      --icon-size: 1.2em;

      vertical-align: text-top;
    }

    ol {
      margin-block: var(--op-space-small) var(--op-space-medium);

      &:last-of-type {
        margin-block-end: var(--op-space-small);
      }
    }
  }

  .notifications-help__explainer {
    padding: var(--op-space-medium);
  }

  .notifications__on-message {
    display: none;

    .notifications--on & {
      display: block;
    }
  }

  .notifications__off-message {
    display: block;

    .notifications--on & {
      display: none;
    }
  }

  .notifications__status {
    --panel-padding: var(--op-space-medium);
  }
}