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

// Base Navigation styles
$active-indicator-width: 3px;
$nav-max-width: 360px;

.Navigation {
  --pc-navigation-icon-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: $mobile-nav-width;
  min-width: $layout-width-nav-base;
  max-width: $nav-max-width;
  height: 100%;
  min-height: 100%;
  background-color: var(--p-background);
  -webkit-overflow-scrolling: touch;
  border-right: var(--p-border-divider);

  @include safe-area-for(padding-bottom, 0, bottom);

  &:focus {
    outline: none;
  }

  @include breakpoint-after($nav-min-window-corrected) {
    max-width: $layout-width-nav-base;
    @include safe-area-for(max-width, $layout-width-nav-base, left);
  }
}

.UserMenu {
  flex: 0 0 auto;
}

.ContextControl {
  min-height: $top-bar-height;

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

.PrimaryNavigation {
  display: flex;
  overflow: auto;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;

  &:focus {
    outline: none;
  }

  @include breakpoint-after($nav-min-window-corrected) {
    padding-top: var(--p-space-4);
  }
}

.LogoContainer {
  display: none;
  @include breakpoint-before(
    $breakpoint: $nav-min-window-corrected,
    $inclusive: false
  ) {
    display: flex;
    flex: 0 0 $top-bar-height;
    align-items: center;
    height: $top-bar-height;
    padding: 0 var(--p-space-2) 0 var(--p-space-4);
    @include safe-area-for(flex-basis, $top-bar-height, left);
    @include safe-area-for(padding-left, var(--p-space-4), left);
  }
}

.Logo,
.LogoLink {
  display: block;
}

// Item styles
$disabled-fade: 0.6;

.Item {
  @include nav-item-attributes;
  position: relative;
}

.Item-selected {
  font-weight: var(--p-font-weight-semibold);
  color: var(--p-text-primary);
  background-color: var(--p-background-selected);
  outline: var(--p-border-width-1) solid transparent;

  &::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: calc(-1 * var(--p-space-2));
    width: $active-indicator-width;
    background-color: var(--p-action-primary);
    border-top-right-radius: var(--p-border-radius-1);
    border-bottom-right-radius: var(--p-border-radius-1);
  }

  @include focus-ring;

  &:hover,
  &.keyFocused {
    background-color: var(--p-background-hovered);
    color: var(--p-text-primary-hovered);
  }

  .keyFocused {
    @include focus-ring($style: 'focused');
  }

  &:active,
  &:active:hover {
    @include no-focus-ring;
    color: var(--p-text-primary);
    background-color: var(--p-background-pressed);
  }

  @include breakpoint-after($nav-min-window-corrected) {
    font-weight: var(--p-font-weight-medium);
  }
}

.Item-disabled {
  color: var(--p-text-disabled);
  pointer-events: none;
  opacity: $disabled-fade;

  .Icon {
    // Re-apply another layer of opacity fade,
    // as the new filled icons have a stronger visual presence
    // than the old outlined ones.
    opacity: $disabled-fade;
  }
}

.Badge {
  margin-left: var(--p-space-2);
  display: inline-flex;
  margin-top: var(--p-space-2);

  @include breakpoint-after($nav-min-window-corrected) {
    margin-top: var(--p-space-1);
  }
}

.Icon {
  @include nav-item-icon-attributes;
}

.ExternalIcon {
  display: flex;
  align-items: center;
  height: nav(mobile-height);
  padding: var(--p-space-1) var(--p-space-2) var(--p-space-1) var(--p-space-4);

  @include breakpoint-after($nav-min-window-corrected) {
    height: nav(desktop-height);
  }
}

.ListItem {
  @include nav-list-item-attributes;

  &:not(:first-child) {
    .Item {
      border-top: var(--p-border-width-1) solid var(--p-background);
    }
  }
}

.ListItem-hasAction .Item {
  max-width: calc(
    100% - var(--pc-navigation-icon-size) + var(--p-space-4) * 2 +
      var(--p-space-1)
  );
}

.ItemWrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.Text {
  @include nav-item-text-attributes;
}

.SecondaryAction {
  @include recolor-icon($fill-color: var(--p-icon));
  display: flex;
  align-items: center;
  height: nav(mobile-height);
  margin-right: var(--p-space-1);
  padding: var(--p-space-1) var(--p-space-4);
  border-radius: var(--p-border-radius-1);

  @include breakpoint-after($nav-min-window-corrected) {
    height: nav(desktop-height);
  }

  &:hover,
  &:focus,
  &:active {
    @include recolor-icon(
      $fill-color: var(--p-icon-hovered),
      $filter-color: var(--p-filter-icon-action-primary)
    );
    background: var(--p-background-hovered);

    @media (-ms-high-contrast: active) {
      @include recolor-icon(
        $fill-color: var(--p-icon-on-interactive),
        $filter-color: var(--p-filter-icon-on-interactive)
      );
    }
  }

  @include focus-ring;

  &:focus {
    @include focus-ring($style: 'focused');
  }

  &:active {
    @include no-focus-ring;
    @include recolor-icon($fill-color: var(--p-icon-pressed));
    background: var(--p-background-pressed);
  }

  &:focus,
  &:active {
    outline: none;
  }
}

// Secondary styles

.SecondaryNavigation {
  flex-basis: 100%;
  margin-left: 0;
  overflow-x: visible;

  &.isExpanded {
    margin-bottom: var(--p-space-2);
  }

  .List {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .Item {
    font-size: var(--p-font-size-4);
    font-weight: var(--p-font-weight-medium);
    line-height: nav(item-line-height);
    color: var(--p-text-subdued);
    padding-left: calc(var(--p-space-8) + var(--p-space-3));

    &:hover {
      color: var(--p-text-subdued);
    }

    // stylelint-disable-next-line selector-max-class
    &.keyFocused {
      @include focus-ring($style: 'focused');
      color: var(--p-text);
    }

    // stylelint-disable-next-line selector-max-specificity
    &:active,
    &:active:hover {
      @include no-focus-ring;
    }

    &:active {
      color: var(--p-text-primary);
    }

    @include breakpoint-after($nav-min-window-corrected) {
      font-size: var(--p-font-size-3);
      line-height: 1;
      padding-left: var(--p-space-10);
    }
  }

  .Text {
    margin-top: var(--p-space-1);
    margin-bottom: var(--p-space-1);
    line-height: var(--p-space-5);
  }

  .Item-selected {
    color: var(--p-text-primary);
    @include focus-ring;

    &:hover {
      color: var(--p-text-primary-hovered);
    }
    // stylelint-disable-next-line selector-max-class
    &.keyFocused {
      color: var(--p-text-primary);
    }

    &:active {
      color: var(--p-text-primary);
      @include no-focus-ring;
    }
  }

  .Item-disabled {
    font-weight: var(--p-font-weight-medium);
    color: var(--p-text-disabled);
  }
}

.SecondaryNavigation-noIcon {
  margin-left: var(--p-space-4);
}

// Section styles
.Section {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--p-space-4) 0;
  padding-top: 0;
  @include safe-area-for(padding-left, 0, left);
  list-style: none;

  + .Section {
    padding-top: var(--p-space-2);
    padding-bottom: var(--p-space-4);
  }
}

.Section-fill {
  flex: 1 0 auto;
}

.Section-withSeparator {
  border-top: var(--p-border-divider);
}

.SectionHeading {
  @include text-style-subheading;
  text-transform: none; // Adding this intentionally to override the default subheading styling.
  display: flex;
  align-items: center;
  min-height: nav(desktop-nav-height);
  padding-left: calc(var(--p-space-5) + var(--p-space-05));

  .Text {
    font-size: var(--p-font-size-2);
    color: var(--p-text-subdued);

    @include when-typography-not-condensed {
      font-size: var(--p-font-size-1);
    }
  }

  .Action {
    @include unstyled-button;
    @include recolor-icon($fill-color: var(--p-icon));
    display: flex;
    align-items: center;
    height: nav(mobile-nav-height);
    margin-right: var(--p-space-1);
    padding: var(--p-space-1) var(--p-space-4);
    border-radius: var(--p-border-radius-1);

    @include breakpoint-after($nav-min-window-corrected) {
      height: nav(desktop-nav-height);

      // stylelint-disable selector-max-combinators
      svg,
      img {
        height: var(--p-space-4);
        width: var(--p-space-4);
        margin: var(--p-space-05);
      }
    }

    @include focus-ring;

    &:hover,
    &:focus {
      background: var(--p-background-hovered);
      @include recolor-icon($fill-color: var(--p-icon-hovered));

      @media (-ms-high-contrast: active) {
        @include recolor-icon(
          $fill-color: var(--p-icon-on-interactive),
          $filter-color: var(--p-filter-icon-on-interactive)
        );
      }
    }

    &:hover {
      @include recolor-icon($filter-color: var(--p-filter-icon));
    }

    &:focus {
      @include focus-ring($style: 'focused');
    }

    // stylelint-disable-next-line selector-max-specificity
    &:focus:hover {
      @include recolor-icon(var(--p-icon-hovered));
    }

    // stylelint-disable-next-line selector-max-specificity
    &:active,
    &:active:hover {
      @include recolor-icon($fill-color: var(--p-icon-pressed));
      background: var(--p-background-pressed);
      @include no-focus-ring;
    }

    &:focus,
    &:active {
      outline: none;
    }
  }
}

.RollupToggle {
  @include text-emphasis-normal;
  @include text-emphasis-subdued;

  &:hover {
    @include recolor-icon(
      $fill-color: var(--p-action-primary),
      $filter-color: var(--p-filter-icon-action-primary)
    );
    color: var(--p-text-primary);
  }

  &:focus {
    outline: none;
    @include focus-ring($style: 'focused');
  }
}

.List {
  margin: 0;
  padding: 0;
  list-style: none;
}

.Indicator {
  position: relative;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.SecondaryNavigation-noIcon .Item {
  padding-left: var(--p-space-3);
}