
/**
 * [1] Will center vertically the empty search result
 * [2] Align the height with the search input height
 */

$heightHeader: $euiSizeL * 2;

.componentTemplates {
  border: $euiBorderThin;
  border-radius: $euiBorderRadius;
  border-top: none;
  height: 100%;

  &__header {
    height: $heightHeader;

    .euiFormControlLayout {
      max-width: initial;
    }
  }

  &__searchBox {
    border-bottom: $euiBorderThin;
    border-top: $euiBorderThin;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
    max-width: initial;
  }

  &__filterListButton {
    border-bottom: $euiBorderThin;
    border-top: $euiBorderThin;
    border-left: $euiBorderThin;
    box-shadow: none;
    height: $euiSizeXXL; /* [2] */

    &,
    & > :first-child .euiFilterButton { /* EUI specificity override */
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &__listWrapper {
    height: calc(100% - #{$heightHeader});

    &--is-empty {
      display: flex; // [1]
    }
  }
}
