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

// Base Navigation styles
$nav-max-width: rem(360px);
.Navigation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: mobile-nav-width();
  min-width: layout-width(nav);
  max-width: $nav-max-width;
  height: 100%;
  min-height: 100%;
  background-color: var(--p-surface-foreground, color('sky', 'light'));
  -webkit-overflow-scrolling: touch;

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

  &:focus {
    outline: none;
  }

  @include breakpoint-after(nav-min-window-corrected()) {
    max-width: layout-width(nav);
    border-right: var(--p-override-none, border());
    @include safe-area-for(max-width, layout-width(nav), left);
  }
}

.UserMenu {
  flex: 0 0 auto;
}

.ContextControl {
  @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%;
}

// Item styles
$disabled-fade: 0.6;

.Item {
  @include nav-item-attributes;
}

.Item-selected {
  font-weight: 600;
  color: var(--p-branded-action, color('indigo', 'dark'));
  background-color: var(--p-branded-selected, $item-selected-background);
  @media (-ms-high-contrast: active) {
    background-color: ms-high-contrast-color('selected-text-background');
  }
  // stylelint-disable selector-max-specificity
  .Icon,
  &:focus .Icon {
    @include recolor-icon(
      var(--p-branded-action, color('indigo')),
      var(--p-override-transparent, color('white'))
    );
  }
  // stylelint-enable selector-max-specificity

  &:hover {
    background-color: var(
      --p-branded-selected-hovered,
      $item-selected-background
    );
    color: var(--p-branded-action-hovered, color('indigo', 'dark'));
  }
  &:focus {
    color: var(--p-branded-action, color('indigo', 'dark'));
    @include focus-ring;
  }
  &:active {
    background-color: var(
      --p-branded-selected-pressed,
      $item-selected-background
    );
    color: var(--p-branded-action-pressed, color('indigo', 'dark'));
    @include no-focus-ring;
  }
}

.Item-disabled {
  color: var(--p-text-disabled-on-surface, color('ink', 'lightest'));
  pointer-events: none;
  opacity: var(--p-override-one, $disabled-fade);

  .Icon {
    @include recolor-icon(
      var(--p-icon-disabled-on-surface, color('ink', 'lightest')),
      var(--p-override-transparent, color('white'))
    );
  }
}

.Badge {
  margin-left: spacing(tight);
  display: inline-flex;
  margin-top: spacing(base-tight);

  @include breakpoint-after(nav-min-window-corrected()) {
    margin-top: spacing(tight);
  }
}

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

.ListItem {
  @include nav-listitem-attributes;
}

.ListItem-hasAction .Item {
  max-width: calc(
    100% - #{nav(icon-size) + spacing() * 2 + spacing(extra-tight)}
  );
}

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

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

.SecondaryAction {
  @include recolor-icon(
    var(--p-icon-subdued-on-surface, color('ink', 'lightest')),
    var(--p-override-transparent, color('white')),
    filter('ink', 'lightest')
  );
  display: flex;
  align-items: center;
  height: nav(mobile-height);
  margin-right: spacing(extra-tight);
  padding: spacing(extra-tight) spacing();
  border-radius: var(--p-border-radius-base, border-radius());

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

  &:hover {
    @include recolor-icon(
      var(--p-branded-action, color('indigo')),
      var(--p-override-transparent, color('white')),
      filter('indigo')
    );
    background-image: var(
      --p-override-none,
      linear-gradient(color(state, hover), color(state, hover))
    );
    background-color: var(--p-surface-hovered);
  }

  &:focus {
    @include recolor-icon(
      var(--p-icon-subdued-on-surface, color('indigo')),
      var(--p-override-transparent, color('white')),
      filter('indigo')
    );
    background-image: var(
      --p-override-none,
      linear-gradient(color(state, hover), color(state, hover))
    );
    @include focus-ring;
  }

  &:focus:hover {
    @include recolor-icon(
      var(--p-branded-action, color('indigo')),
      var(--p-override-transparent, color('white')),
      filter('indigo')
    );
  }

  &:active {
    @include recolor-icon(
      var(--p-branded-action, color('indigo')),
      var(--p-override-transparent, color('white')),
      filter('indigo')
    );
    background-image: var(
      --p-override-none,
      linear-gradient(color(state, hover), color(state, hover))
    );
    @include no-focus-ring;
    background-color: var(--p-surface-pressed);
  }

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

// Secondary styles
$secondary-item-font-size: rem(15px);
.SecondaryNavigation {
  flex-basis: 100%;
  margin-bottom: spacing(tight);
  margin-left: nav(icon-size) + spacing(loose);
  overflow-x: var(--p-override-visible, hidden);
  @include breakpoint-after(nav-min-window-corrected()) {
    margin-left: nav(icon-size) + spacing();
  }
  .List {
    @include unstyled-list;
  }
  .Item {
    font-size: $secondary-item-font-size;
    font-weight: 400;
    line-height: nav(item-line-height);
    color: var(--p-text-on-surface, color('ink', 'light'));
    &:hover {
      color: var(--p-branded-action, color('indigo', 'dark'));
    }
    &:focus {
      color: var(--p-text-on-surface, color('indigo', 'dark'));
      @include focus-ring;
    }
    // stylelint-disable selector-max-specificity
    &:focus:hover {
      color: var(--p-branded-action, color('indigo', 'dark'));
    }
    &:active,
    &:active:hover {
      color: var(--p-branded-action-pressed, color('indigo', 'dark'));
      @include no-focus-ring;
    }
    // stylelint-enable selector-max-specificity
    @include breakpoint-after(nav-min-window-corrected()) {
      font-size: rem(14px);
      line-height: rem(28px);
    }
  }
  .Text {
    margin-top: nav(mobile-spacing);
    margin-bottom: nav(mobile-spacing);
    line-height: rem(20px);
    @include breakpoint-after(nav-min-window-corrected()) {
      margin-top: spacing(extra-tight);
      margin-bottom: spacing(extra-tight);
    }
  }
  .Item-selected {
    font-weight: 600;
    color: var(--p-branded-action, color('indigo', 'dark'));
    &:hover {
      color: var(--p-branded-action-hovered, color('indigo', 'dark'));
    }
    &:focus {
      color: var(--p-branded-action, color('indigo', 'dark'));
      @include focus-ring;
    }
    &:active {
      color: var(--p-branded-action-pressed, color('indigo', 'dark'));
      @include no-focus-ring;
    }
  }
  .Item-disabled {
    font-weight: 400;
    color: var(--p-text-disabled-on-surface, color('ink', 'lightest'));
  }
}

// Section styles
.Section {
  @include unstyled-list;
  flex: 0 0 auto;
  padding: spacing() 0;
  @include safe-area-for(padding-left, 0, left);

  + .Section {
    padding-top: spacing(extra-tight);
  }
}

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

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

.SectionHeading {
  @include text-style-subheading;
  display: flex;
  align-items: center;
  min-height: nav(desktop-nav-height);
  padding-left: spacing();
  color: var(--p-text-subdued-on-surface, color('ink', 'lighter'));

  .Action {
    @include unstyled-button;
    @include recolor-icon(
      var(--p-icon-subdued-on-surface, color('ink', 'lightest')),
      var(--p-override-transparent, color('white')),
      filter('ink', 'lightest')
    );
    display: flex;
    align-items: center;
    height: nav(mobile-nav-height);
    margin-right: spacing(extra-tight);
    padding: spacing(extra-tight) spacing();
    border-radius: var(--p-border-radius-base, border-radius());

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

    &:hover {
      @include recolor-icon(
        var(--p-branded-action, color('indigo')),
        var(--p-override-transparent, color('white')),
        filter('indigo')
      );
      background-image: var(
        --p-override-none,
        linear-gradient(color(state, hover), color(state, hover))
      );
      background-color: var(--p-surface-hovered);
    }

    &:focus {
      @include recolor-icon(
        var(--p-icon-subdued-on-surface, color('indigo')),
        var(--p-override-transparent, color('white')),
        filter('indigo')
      );
      background-image: var(
        --p-override-none,
        linear-gradient(color(state, hover), color(state, hover))
      );
      @include focus-ring;
    }

    // stylelint-disable-next-line selector-max-specificity
    &:focus:hover {
      @include recolor-icon(
        var(--p-branded-action, color('indigo')),
        var(--p-override-transparent, color('white')),
        filter('indigo')
      );
    }

    &:active {
      @include recolor-icon(
        var(--p-branded-action, color('indigo')),
        var(--p-override-transparent, color('white')),
        filter('indigo')
      );
      background-image: var(
        --p-override-none,
        linear-gradient(color(state, hover), color(state, hover))
      );
      @include no-focus-ring;
      background-color: var(--p-surface-pressed);
    }

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

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

  &:hover {
    @include recolor-icon(
      var(--p-branded-action, color('indigo')),
      null,
      filter('indigo')
    );
    color: var(--p-branded-action, color('indigo'));
  }

  &:focus {
    outline: none;
    @include focus-ring;
  }
}

.List {
  @include unstyled-list;
}

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