@layer plugin {
  .topbar-banner {
    --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-banner.level-info {
    background-color: var(--flashinfo-info-color);
  }
  .flashinfo-banner.level-warn {
    background-color: var(--flashinfo-warn-color);
  }
  .flashinfo-banner.level-alert {
    background-color: var(--flashinfo-alert-color);
  }
  .flashinfo-banner {
    display: flex;
    padding: var(--uui-spacing-md) var(--uui-spacing-6xl);
    justify-content: center;
    align-items: center;
    width: 100%;
    .wysiwyg-inline-edit-display:hover .wysiwyg-inline-buttons {
      display: none;
    }
  }
  .flashinfo-banner-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--uui-spacing-lg);
    width: 100%;
    max-width: 50rem;
    .flashinfo-banner__menu-opener-div {
      padding-inline: 0.625rem var(--uui-spacing-md);
      align-items: center;
      border-radius: var(--uui-radius-full);
      outline: 1.5px solid var(--uui-colors-foreground-fg-white);
    }
    BUTTON.flashinfo-banner__menu-opener {
      display: flex;
      gap: var(--uui-spacing-xs);
      padding: 0;
      color: var(--uui-colors-foreground-fg-white);
      text-align: center;
      font-size: var(--uui-font-size-text-sm);
      font-style: normal;
      font-weight: 500;
      line-height: var(--uui-line-height-text-sm);
      background-color: transparent;
      border: 0 none;
      white-space: nowrap;
      .jalios-icon {
        width: var(--uui-font-size-text-xs);
      }
    }
    .flashinfo-banner__text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--uui-colors-foreground-fg-white);
      text-align: center;
      font-size: var(--uui-font-size-text-sm);
      line-height: var(--uui-line-height-text-sm);
    }
  }
  .flashinfo-banner__menu {
    position: absolute;
    margin-top: 0.125rem; /*Little gap between banner and menu top*/
    z-index: 9999;
    padding-inline: 0;
    width: 100%;
    max-width: 50rem;
    .flashinfo__content {
      --flashinfo-topbar-content-max-height: 50vh;
      overflow-y: auto;
      max-height: var(--flashinfo-topbar-content-max-height);
    }
  }
}