@use "../panel/panel";
@use "../_layout/mixins";

/* @todo rebuild so that <ul> and <li> can be used as children for .panelNav__items to negate need for aria roles */

.panelNav {
  @include panel.panel();
}
.panelNav__heading {
  font-size: var(--step-2);
}
.panelNav__items {
  display: flex;
  flex-direction: column;
  margin-block: 0 -0.5em;
}
.panelNav__items--inline {
  display: block;
}
.panelNav__item {
  @include mixins.blockLink($underline: false);
  padding-block: 0.5em;

  &:hover,
  &:focus {
    text-decoration: none;
  }
  & + & {
    border-block-start: 1px solid var(--neutral--dark);
  }
}

.panelNav__item--active {
  --color: var(--type);

  &:hover, &:active {
    --color: var(--type);
  }
}

.panelNav__items--inline {
  margin-block-start: .5em;
  .panelNav__item {
    padding-block: 0;
  }
  .panelNav__item + .panelNav__item {
    border-block-start: 0;
  }
  .panelNav__item:nth-last-child(n+2)::after {
    content: "|";
    margin-inline-start: 0.3em;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: var(--type);
  }
  .panelNav__item--active {
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
  }
}