div.critical-comms {
  --critical-comms-background-color: var(--color-background-negative);
  --critical-comms-title-color: var(--color-content-negative);
  --critical-comms-subtitle-color: var(--color-content-secondary);
  --critical-comms-subtitle-color-padding-left: var(--size-16);
  --critical-comms-vertical-spacing: var(--size-8);

  .np-theme-personal &,
  .np-theme-personal--dark & {
    --critical-comms-background-color: var(--color-sentiment-negative);
    --critical-comms-title-color: var(--color-contrast);
    --critical-comms-subtitle-color: var(--color-contrast);
    --critical-comms-subtitle-color-padding-left: 0;
    --critical-comms-vertical-spacing: var(--size-16);

    padding: var(--padding-medium);

    .tw-icon-alert-circle-fill {
      color: var(--color-contrast);

      svg {
        width: 48px;
        height: 48px;
      }
    }

    .cta-btn {
      background-color: var(--color-contrast);

      &:not(.disabled,:disabled):focus {
        outline-color: var(--color-contrast);
      }
    }
  }

  background-color: var(--critical-comms-background-color);
  display: flex;
  justify-content: center;
  align-items: center;

  @media (--screen-sm-max) {
    display: initial;
  }

  .critical-comms--title {
    color: var(--critical-comms-title-color);
  }

  .critical-comms--subtitle {
    color: var(--critical-comms-subtitle-color);
  }

  .critical-comms--cta {
    padding-left: 0;

    @media (--screen-sm-max) {
      padding-left: var(--critical-comms-subtitle-color-padding-left);
      padding-top: var(--critical-comms-vertical-spacing);
      min-width: 100%;
    }
  }

  .critical-comms-body {
    display: flex;
    width: 100%;

    @media (--screen-sm-max) {
      flex-direction: column;
    }
  }

  .critical-comms-content {
    @media (--screen-sm-max) {
      padding-top: var(--critical-comms-vertical-spacing);
      flex-wrap: wrap;
    }
  }
}
