@import '../link/mixins';

.euiHeaderLogo {
  @include euiLink;

  position: relative;
  height: $euiHeaderChildSize;
  line-height: $euiHeaderChildSize;
  min-width: $euiHeaderChildSize + 1px;
  padding: 0 ($euiSizeM + 1px) 0 $euiSizeM;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;

  &:hover {
    background: $euiColorLightestShade;
  }

  &:focus,
  &:hover {
    text-decoration: none;
  }
}

.euiHeaderLogo__text {
  @include euiTitle('s');
  padding-left: $euiSize;
  font-weight: $euiFontWeightLight;
}

@include euiBreakpoint('xs') {
  .euiHeaderLogo {
    padding: 0 $euiSizeM;
  }

  .euiHeaderLogo__icon.euiIcon--xLarge {
    width: $euiSizeL;
    height: $euiSizeL;
  }

  .euiHeaderLogo__text {
    @include euiTitle('xs');
    font-weight: $euiFontWeightRegular;
  }
}