@mixin info-overlay-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $accent: map-get($theme, accent);
  $primary-color: mat.get-color-from-palette($primary, 500);

  $warn-color: mat.get-color-from-palette($warn, 500);
  $accent-color: mat.get-color-from-palette($accent, 500);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $back: map-get($background, background);

  .cnsl-overlay-backdrop {
    background-color: if($is-dark-theme, #00000080, #ffffff80);
    backdrop-filter: blur(2px);
  }

  .cnsl-overlay-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: map-get($background, cards);
    border-radius: 6px;
    padding: 1rem;
    font-size: 14px;
    width: 300px;
    border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

    &::before {
      visibility: hidden;
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: 0.75rem solid transparent;
      border-top: none;
      border-radius: 4px;
      border-bottom-color: map-get($background, cards);
    }
  }

  .context_intro_overlay {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: map-get($foreground, text);

    &.top-left {
      &::before {
        visibility: visible;
        bottom: 100%;
        left: 1.5em;
      }
    }

    &.top-right {
      &::before {
        visibility: visible;
        bottom: 100%;
        right: 1.5em;
      }
    }

    .overlay-info-row {
      display: flex;
      justify-content: space-between;
      margin: -1rem -1rem 0.5rem 0;
      align-items: center;

      .info {
        font-size: 12px;
        text-transform: uppercase;
        color: $primary-color;
      }
    }

    p {
      margin: 0;
      font-size: 15px;
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: break-word;
      font-style: italic;
      line-height: 1.3rem;
    }

    .overlay-actions {
      display: flex;
      align-items: center;
      padding-top: 0.5rem;
      justify-content: flex-end;

      button {
        margin-left: 0.5rem;
      }
    }
  }
}