.kuiPanel {
  @include euiBottomShadowSmall;

  background-color: $euiColorEmptyShade;
  border: $euiBorderThin;
  border-radius: $euiBorderRadius;
}

.kuiPanel--prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 300px;

  .kuiPanelBody {
    padding: 30px;
    max-width: 500px;
  }
}

.kuiPanel--noBorder {
  border: none;
}

.kuiPanel--withToolBar {
  border-top: none;
  border-radius: 0;
}

.kuiPanel--centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.kuiPanelHeader {
  @include bar;
  @include buttonOnStandoutBackground;
  @include selectOnStandoutBackground;

  padding: $panelPadding;
  height: $panelHeight;
  border-bottom: $kuiBorderThin;
}

/**
   * 1. This way we can use h1, h2, etc.
   */
.kuiPanelHeader__title {
  font-size: $kuiTitleFontSize;
  line-height: $kuiLineHeight;
  margin: 0; /* 1 */
}

/**
 * 1. Undo what barSection mixin does.
 */
.kuiPanelHeaderSection {
  @include barSection;

  &:only-child {
    margin-left: 0; /* 1 */
    margin-right: auto; /* 1 */
  }
}

.kuiPanelBody {
  padding: $panelPadding;
}