@import 'variables';

// Base Navigation styles
$nav-max-width: rem(360px);
.Biblio-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('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);
    @include safe-area-for(max-width, layout-width(nav), left);
  }
}

.Biblio-Navigation__UserMenu {
  flex: 0 0 auto;
}

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

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

// Item styles
$disabled-fade: 0.6;

.Biblio-Navigation__Item {
  @include nav-item-attributes;
}

.Biblio-Navigation__Item--selected {
  font-weight: 600;
  color: color('indigo');

  // stylelint-disable selector-max-specificity
  .Biblio-Navigation__Icon,
  &:focus .Biblio-Navigation__Icon {
    @include recolor-icon(color('indigo'), color('white'));
  }
  // stylelint-enable selector-max-specificity

  &:hover {
    color: color('indigo');
  }
}

.Biblio-Navigation__Item--disabled {
  color: color('ink', 'lightest');
  pointer-events: none;
  opacity: $disabled-fade;
}

.Biblio-Navigation__Badge {
  margin-right: spacing(extra-tight);
  margin-left: spacing(tight);
}

.Biblio-Navigation__Icon {
  @include nav-item-icon-attributes;
}

.Biblio-Navigation__ListItem {
  @include nav-listitem-attributes;
}

.Biblio-Navigation__ListItem--hasAction .Biblio-Navigation__Item {
  max-width: calc(
    100% - #{nav(icon-size) + spacing() * 2 + spacing(extra-tight)}
  );
  padding-right: 0;
}

.Biblio-Navigation__Text {
  @include nav-item-text-attributes;
}

.Biblio-Navigation__SecondaryAction {
  @include recolor-icon(color('ink', 'lightest'), color('white'));
  display: flex;
  align-items: center;
  height: nav(mobile-height);
  margin-right: spacing(extra-tight);
  padding: spacing(extra-tight) spacing();
  border-radius: border-radius();

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

  &:hover,
  &:focus,
  &:active {
    @include recolor-icon(color('indigo'), color('white'));
  }

  &:focus,
  &:active {
    outline: none;
    background-color: rgba(color('sky'), 0.5);
  }
}

// Secondary styles
$secondary-item-font-size: rem(15px);
.Biblio-Navigation__SecondaryNavigation {
  flex-basis: 100%;
  margin-bottom: spacing(tight);
  margin-left: nav(icon-size) + spacing(loose);
  overflow-x: hidden;
  @include breakpoint-after(nav-min-window-corrected()) {
    margin-left: nav(icon-size) + spacing();
  }
  .Biblio-Navigation__List {
    @include unstyled-list;
  }
  .Biblio-Navigation__Item {
    font-size: $secondary-item-font-size;
    font-weight: 400;
    line-height: nav(item-line-height);
    color: color('ink', 'lighter');
    &:hover,
    &:focus {
      color: color('indigo');
    }
    @include breakpoint-after(nav-min-window-corrected()) {
      font-size: rem(14px);
      line-height: rem(28px);
    }
  }
  .Biblio-Navigation__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);
    }
  }
  .Biblio-Navigation__Item--selected {
    font-weight: 500;
    color: color('indigo');
    @include breakpoint-after(nav-min-window-corrected()) {
      font-weight: 600;
    }
  }
  .Biblio-Navigation__Item--disabled {
    font-weight: 400;
    color: color('ink', 'lightest');
  }
}

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

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

.Biblio-Navigation__Section--fill {
  flex: 1 0 auto;
}

.Biblio-Navigation__Section--withSeparator {
  border-top: border();
}

.Biblio-Navigation__SectionHeading {
  @include text-style-subheading;
  display: flex;
  align-items: center;
  min-height: nav(desktop-nav-height);
  padding-left: spacing();
  color: color('ink', 'lighter');

  .Biblio-Navigation__Action {
    @include unstyled-button;
    @include recolor-icon(color('ink', 'lightest'), color('white'));
    display: flex;
    align-items: center;
    height: nav(mobile-nav-height);
    margin-right: spacing(extra-tight);
    padding: spacing(extra-tight) spacing();
    border-radius: border-radius();
    transition: background-color duration() easing();

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

    &:hover,
    &:active,
    &:focus {
      @include recolor-icon(color('indigo'));
    }

    &:focus,
    &:active {
      background-color: rgba(color('sky'), 0.5);
    }
  }
}

.Biblio-Navigation__RollupToggle {
  @include text-emphasis-normal;
  @include text-emphasis-subdued;

  &:hover {
    @include recolor-icon(color('indigo'));
    color: color('indigo');
  }

  &:focus {
    outline: none;
  }
}

.Biblio-Navigation__List {
  @include unstyled-list;
}

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