/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-banner {
  /**
    @prop --banner-border-width:
      Define the border width for hte left decorative banner bar.
      - default: 0.5rem
  */
  --banner-border-width: 0.5rem;
  /**
    @prop --banner-border-color:
      Define the border color for left decorative banner bar.
      - default: var(--go-color-primary-300)
  */
  --banner-border-color: var(--go-color-primary-300);
  /**
    @prop --banner-radius:
      Define border radius for banner.
      - default: var(--radius-2)
  */
  --banner-radius: var(--radius-2);
  /**
    @prop --banner-padding-x:
      Horizontal padding of banner area
      - default: 1rem
  */
  --banner-padding-x: 1rem;
  /**
    @prop --banner-padding-y:
      Vertical padding of banner area
      - default: 1rem
  */
  --banner-padding-y: 1rem;
  /**
    @prop --banner-heading-gap
    The gap between the heading and the content.
    - default 0.5rem
  */
  --banner-heading-gap: 0.5rem;
  /**
    @prop --banner-bg-color:
      Background color for banner.
      - default: var(--go-color-primary-200)
  */
  --banner-bg-color: var(--go-color-primary-200);
  /**
    @prop --banner-fg-color:
      Foreground color for banner
      - default: var(--go-color-darkest)
  */
  --banner-fg-color: var(--go-color-darkest);
  /**
    @prop --banner-shadow:
      Shadow for banner
      - default: var(--shadow-1)
  */
  --banner-shadow: var(--shadow-1);
  /**
    @prop --banner-icon-bar-padding:
      Padding for icon bar
      - default: 0.5rem
  */
  --banner-icon-bar-padding: 0.5rem;
  border-left: var(--banner-border-width) solid var(--banner-border-color);
  border-radius: var(--banner-radius);
  background-color: var(--banner-bg-color);
  color: var(--banner-fg-color);
  box-shadow: var(--banner-shadow);
  display: none;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}
go-banner.is-showing {
  display: flex;
}
go-banner[variant=success] {
  --banner-border-color: var(--go-color-success-300);
  --banner-bg-color: var(--go-color-success-100);
  --banner-fg-color: var(--go-color-darkest);
}
go-banner[variant=critical] {
  --banner-border-color: var(--go-color-critical-300);
  --banner-bg-color: var(--go-color-critical-100);
  --banner-fg-color: var(--go-color-darkest);
}
go-banner .icon-col {
  background: var(--banner-border-color);
  color: var(--banner-icon-color);
  padding: 0 calc(var(--banner-border-width) + var(--banner-icon-bar-padding)) 0 var(--banner-icon-bar-padding);
  display: flex;
  align-items: center;
}
go-banner .banner-inner {
  display: flex;
  width: 100%;
  padding: var(--banner-padding-y) var(--banner-padding-x);
}
go-banner .banner-inner-content {
  flex: 1;
}
go-banner .banner-inner-content h2 {
  margin-bottom: var(--banner-heading-gap);
}
go-banner .banner-inner-content p:first-child {
  margin-top: 0;
}
go-banner .banner-inner-content p:last-child {
  margin-bottom: 0;
}
go-banner .banner-inner-dismiss {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}