/* ==================================
   #LIST NAVIGATION
   ================================== */

/* Variables
   ========================================================================== */

$au-list-navigation-border-color: var(--au-divider-color) !default;

/* Component
   ========================================================================== */

.au-c-list-navigation {
  @include au-font-size(var(--au-base));
  display: flex;
  flex-wrap: wrap;

  @include mq(medium) {
    @include au-font-size(1.5rem);
  }
}

.au-c-list-navigation__item {
  flex-basis: 20rem;

  @include mq(medium) {
    flex-basis: 100%;

    & + & {
      border-top: 1px solid $au-list-navigation-border-color;
    }
  }
}

.au-c-list-navigation__item--section {
  flex-basis: 100%;

  & + & {
    border-top: 1px solid $au-list-navigation-border-color;
  }

  @include mq(medium) {
  }
}

.au-c-list-navigation__section-title {
  @include au-font-size(1.4rem);
  padding: $au-unit-tiny * 1.5 $au-unit-small;
  font-weight: var(--au-medium);
  color: var(--au-gray-600);
  text-transform: uppercase;
  border-bottom: 1px solid $au-list-navigation-border-color;

  @include mq(medium) {
    padding: $au-unit-small $au-unit-small + $au-unit-tiny;
  }
}

.au-c-list-navigation__link {
  @include au-font-size(var(--au-base));
  display: flex;
  align-items: center;
  font-family: var(--au-font);
  transition:
    color var(--au-transition),
    text-decoration var(--au-transition);
  font-weight: var(--au-regular);
  padding: $au-unit-tiny * 1.5 $au-unit-small;
  text-decoration-color: var(
    --au-blue-300
  ) !important; // @TODO: remove important when webuniversum is removed
  text-decoration: underline;
  text-underline-offset: 0.3ex;

  &,
  &:visited {
    color: var(--au-blue-700);
  }

  &:hover,
  &:focus {
    color: var(--au-blue-900);
    text-decoration-color: var(--au-blue-200) !important;
  }

  &:focus {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset-negative);
  }

  // @TODO: change to state class > is-active
  &.active {
    font-weight: var(--au-medium);
    color: var(--au-gray-900);
    text-decoration: none;
  }

  @include mq(medium) {
    padding: $au-unit-small $au-unit-small + $au-unit-tiny;

    &.active {
      box-shadow: inset -0.3rem 0 0 var(--au-gray-300);
      background-color: var(--au-gray-200);
    }
  }
}

.au-c-list-navigation__link--highlight {
  font-weight: var(--au-medium);
}