@layer plugin {
  .flashinfo-popover {
    --flashinfo-info-color: var(--uui-component-colors-utility-blue-utility-blue-600);
    --flashinfo-warn-color: var(--uui-colors-warning-600);
    --flashinfo-alert-color: var(--uui-colors-error-600);
    --flashinfo-color: var(--flashinfo-info-color);
    &.level-info {
      --flashinfo-color: var(--flashinfo-info-color);
    }
    &.level-warn {
      --flashinfo-color: var(--flashinfo-warn-color);
    }
    &.level-alert {
      --flashinfo-color: var(--flashinfo-alert-color);
    }
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uui-spacing-lg);
    padding: var(--uui-spacing-3xl);
    background: var(--uui-colors-background-bg-primary);
    border-color: var(--flashinfo-color);
    border-width: 0.25rem;
    border-style: solid;
    border-radius: var(--uui-radius-xl);
    box-shadow: 0 0.75rem 1rem -0.25rem var(--uui-colors-effects-shadows-shadow-lg-01),
      0 0.25rem 0.375rem -0.125rem var(--uui-colors-effects-shadows-shadow-lg-02),
      0 0.125rem 0.125rem -0.063rem var(--uui-colors-effects-shadows-shadow-lg-03);
    .flashinfo__title {
      display: flex;
      gap: var(--uui-spacing-lg);
      margin: auto 0;
      color: var(--flashinfo-color);
      --j-link-color: var(--flashinfo-color);
      .level-icon-circles {
        margin-top: 0.25rem;
        color: var(--flashinfo-color);
      }
      .jalios-icon {
        color: var(--flashinfo-color);
        --j-icons-svg-uui-size: var(--uui-font-size-text-xl);
      }
    }
    .flashinfo__title,
    .flashinfo__title H1 {
      font-size: var(--uui-font-size-text-xl);
      font-weight: var(--uui-font-weight-semibold);
      line-height: var(--uui-line-height-text-xl);
    }
    .flashinfo__nav-and-actions {
      display: flex;
      justify-content: flex-end;
      align-self: stretch;
      .flashinfo__pager {
        display: flex;
        align-items: center;
        color: var(--uui-colors-foreground-fg-tertiary);
        gap: var(--uui-spacing-xl);
        .flashinfo-topbar-page-next.jalios-icon,
        .flashinfo-topbar-page-prev.jalios-icon,
        .btn {
          color: var(--uui-colors-foreground-fg-quaternary);
          border-color: transparent;
          &:disabled,
          &:disabled:hover,
          &:disabled:focus,
          &:disabled:active {
            background-color: transparent;
            > .jalios-icon {
              color: var(--uui-colors-foreground-fg-senary);
            }
          }
        }
      }
    }
    .flashinfo__divider {
      display: flex;
      width: 100%;
      padding: var(--uui-spacing-xs) 0;
      align-items: center;
      border-top: 1px solid var(--uui-colors-border-border-secondary);
    }
    .flashinfo__content {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--uui-spacing-sm);
      align-self: stretch;
    }
    .flashinfo__content-header {
      display: flex;
      padding: var(--uui-spacing-md);
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: var(--uui-spacing-lg);
      align-self: stretch;
      UL.flashinfo__badges {
        width: 100%;
      }
    }
    .flashinfo__sender-and-actions {
      display: flex;
      align-items: flex-start;
      gap: var(--uui-spacing-xl);
      align-self: stretch;
      justify-content: space-between;
    }
    .flashinfo__content-body {
      padding: var(--uui-spacing-lg);
    }
  }
}