/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * Note: Bottom margin is added in _page.scss when OuiPage has `paddingSize`
 *       Or it's added in _page_body.scss when OuiPageBody has `paddingSize`
 */

.ouiPageHeader {
  @include ouiPageRestrictWidth;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; // Ensures Safari doesn't shrink beyond contents
}

.ouiPageHeader--bottomBorder {
  border-bottom: $ouiBorderThin;

  &:not(.ouiPageHeader--tabsAtBottom) {
    // Default padding to separate contents (unless there's tabs)
    padding-bottom: map-get($ouiPanelPaddingModifiers, 'paddingLarge');
  }
}

// Uses the same values as OuiPanel
@each $modifier, $amount in $ouiPanelPaddingModifiers {
  .ouiPageHeader--#{$modifier} {
    padding: $amount;

    // Use margin if there are tabs to keep border close to tabs
    &.ouiPageHeader--tabsAtBottom {
      padding-bottom: 0;
    }

    &.ouiPageHeader--tabsAtBottom.ouiPageHeader--bottomBorder {
      margin-bottom: $amount;
    }
  }
}

.ouiPageHeader--top {
  align-items: flex-start;
}

.ouiPageHeader--bottom {
  align-items: flex-end;
}

.ouiPageHeader--stretch {
  align-items: stretch;
}

@include ouiBreakpoint('xs', 's') {
  .ouiPageHeader--responsive {
    flex-direction: column;
  }

  .ouiPageHeader--responsiveReverse {
    flex-direction: column-reverse;
  }
}