@import '../../styles/common';
@import './variables';

$icon-size: 20px;
$page-left-alignment-breakpoint-max: 1238px;
$context-control-expand-after: 1400px;

.TopBar {
  position: relative;
  display: flex;
  height: $top-bar-height;
  box-shadow: var(--p-shadow-top-bar);
  background-color: var(--p-surface);
  transition: var(--p-duration-200) background-color var(--p-ease-in-out);

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: var(--p-border-width-1) solid transparent;
  }
}

.LogoDisplayControl {
  display: none;
  @include breakpoint-after($nav-min-window-corrected) {
    display: flex;
  }
}

.LogoDisplayContainer {
  display: flex;
}

.LogoContainer {
  flex: 0 0 $layout-width-nav-base;
  align-items: center;
  height: 100%;
  padding: 0 var(--p-space-2) 0 var(--p-space-4);
  @include safe-area-for(flex-basis, $layout-width-nav-base, left);
  @include safe-area-for(padding-left, var(--p-space-4), left);

  &.hasLogoSuffix {
    gap: var(--p-space-2);
  }
}

.Logo,
.LogoLink {
  display: block;
}

.ContextControl {
  display: none;
  @include breakpoint-after($nav-min-window-corrected) {
    width: $layout-width-nav-base;
    display: block;
  }

  @include breakpoint-after($context-control-expand-after) {
    width: $layout-width-nav-base;
  }
}

.NavigationIcon {
  @include unstyled-button;
  position: relative;
  align-self: center;
  margin-left: calc(var(--p-space-2) + var(--p-space-05));
  margin-right: var(--p-space-2);
  padding: var(--p-space-2);
  border-radius: var(--p-border-radius-base);
  fill: var(--p-icon); // Icon will inherit this fill
  transition: var(--p-duration-150) fill var(--p-ease) var(--p-duration-50);

  &.focused:active {
    background-color: var(--p-surface-pressed);
  }

  &:hover {
    background-color: var(--p-surface-hovered);
  }
  // This increases hit point size.
  &::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--p-space-2));
    left: calc(-1 * var(--p-space-2));
    width: calc(100% + var(--p-space-5));
    height: calc(100% + var(--p-space-5));
  }
  @include breakpoint-after($nav-min-window-corrected) {
    display: none;
  }

  .IconWrapper {
    @include focus-ring($border-width: 6px);
  }

  // stylelint-disable selector-max-specificity
  &:focus:not(:active) {
    .IconWrapper {
      @include focus-ring($style: 'focused');
    }
  }
  // stylelint-enable selector-max-specificity
}

.Contents {
  z-index: var(--p-z-1);
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  height: 100%;

  @include breakpoint-after($not-condensed-content) {
    position: relative;
  }
}

.SearchField {
  @include page-layout;
  position: relative;
  width: 100%;
  margin: 0;
  max-width: none;
  margin-left: calc((100% - #{$page-max-width}) / 2);

  @media (max-width: $page-left-alignment-breakpoint-max) {
    margin-left: 0;
    margin-right: var(--p-space-1);
  }
}

.SecondaryMenu {
  @include recolor-icon(var(--p-icon));
}