@import '../global_styling/mixins/button';

.euiHeader {
  height: $euiHeaderHeight;
  padding-left: $euiSizeS;
  padding-right: $euiSizeS;
}

// Remove borders without deleting the prop just yet
.euiHeaderSectionItem:after {
  display: none !important; // sass-lint:disable-line no-important
}

.euiHeaderLogo {
  @include euiBreakpoint('xs') {
    padding-left: $euiSizeXS;
  }

  padding-left: $euiSizeS;
  padding-right: $euiSizeS;
  min-width: $euiHeaderChildSize;
}

.euiHeaderLogo__text {
  @include euiTitle('xxs');
}

.euiHeader--default + .euiHeader--default {
  border-top: $euiBorderThin;
}

// Breadcrumbs

.euiHeaderBreadcrumbs {
  font-size: $euiFontSizeXS;
  line-height: $euiSize;
  margin-left: $euiSizeS;
  margin-right: $euiSizeS;

  // No separators
  .euiBreadcrumbSeparator {
    display: none !important; // sass-lint:disable-line no-important
  }

  // Only the header breadcrumbs get the new Amsterdam style so that there can
  // still be default text only breadcrumbs for places like EuiControlBar
  .euiBreadcrumb {
    @include euiButtonDefaultStyle($euiTextColor);
    line-height: $euiSize;
    font-weight: $euiFontWeightMedium;
    padding: $euiSizeXS $euiSize;
    clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%);

    &:focus {
      @include euiFocusRing(null, 'inner');
    }

    // If it's a link the easiest way to detect is via our .euiLink class since it can accept either href or onClick
    // Also helps to add specificity for overriding hover state
    &.euiBreadcrumb--collapsed,
    &.euiLink {
      @include euiButtonDefaultStyle($euiColorPrimary);

      &:hover,
      &:focus {
        color: $euiColorPrimary;
      }
    }

    &.euiBreadcrumb--collapsed .euiLink {
      &,
      &:hover,
      &:focus {
        color: $euiColorPrimary;
      }
    }

    &:not(.euiBreadcrumb--last) {
      margin-right: -$euiSizeXS;
    }

    &:first-child {
      padding-left: $euiSizeM;
      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
      clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%);
    }
  }

  .euiBreadcrumb--last {
    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
    padding-right: $euiSizeM;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%);
  }

  // In case the item is first AND last, aka only, just make it a fully rounded item
  .euiBreadcrumb:only-child {
    clip-path: none;
    padding-left: $euiSizeM;
    padding-right: $euiSizeM;
    border-radius: $euiBorderRadius;
  }
}