/* ==========================================================================
 * Global Nav
 * ========================================================================== */

.mds-c-global-nav {
  --mds-v-global-nav__color: var(--mds-t-link-color--primary);
  --mds-v-global-nav__color--hover: var(--mds-t-link-color--hover);
  --mds-v-global-nav__color--active: var(--mds-t-border-color-inverse-accent);

  line-height: 0;

  &:first-child {
    margin-bottom: auto;
  }

  &:not(:last-child) {
    padding-bottom: var(--mds-d-spacing--med);

    &.mds-c-global-nav--horizontal {
      padding-bottom: 0;
    }
  }
}

.mds-c-global-nav__list {
  .mds-c-global-nav--horizontal & {
    display: flex;
  }
}

.mds-c-global-nav__item {
  color: var(--mds-v-global-nav__color);
  position: relative;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xs);
  }

  .mds-c-global-nav--horizontal & {
    flex: 1;
    margin: 0 !important;
  }

  &--spaced {
    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--lg);
    }
  }
}

.mds-c-global-nav__link {
  @mixin mds-m-heading--size-lg;

  align-items: center;
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-v-global-nav__color);
  cursor: pointer;
  display: flex;
  padding: calc(var(--mds-d-spacing--xs) + var(--mds-d-spacing--xxs))
    var(--mds-d-spacing--sm);
  width: 100%;

  .mds-c-global-nav--horizontal & {
    justify-content: center;
    margin: auto;
    text-align: center;
  }

  &:enter {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 2px solid var(--mds-t-border-color-inverse-accent);
    outline-offset: -2px;
  }

  .mds-c-navigation.mds-is-collapsed & {
    padding-right: var(--mds-d-spacing--sm);
  }

  &.mds-is-active {
    .mds-c-global-nav--horizontal & {
      &::before {
        background-color: var(--mds-t-background-color--accent);
        bottom: 0;
        content: '';
        display: block;
        height: 1px;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        width: calc(100% - (var(--mds-d-spacing--sm) * 2));
      }
    }
  }
}

.mds-c-global-nav__icon {
  flex-shrink: 0;
  padding-bottom: var(--mds-d-spacing--xs);
  padding-top: var(--mds-d-spacing--xs);
  pointer-events: none;
  position: relative;
  transition: color ease-out 0.15s;

  .mds-c-global-nav__link.mds-is-active &,
  .mds-c-global-nav__link:enter & {
    color: var(--mds-v-global-nav__color--active);
  }

  .mds-c-icon {
    display: block;
  }
}

.mds-c-global-nav__label {
  @mixin mds-m-text-overflow-ellipsis;

  color: var(--mds-v-global-nav__color);
  margin-left: var(--mds-d-spacing--med);
  text-align: left; /* To prevent jumping when truncated */
  transition-duration: 0.15s;
  transition-property: color, opacity;
  transition-timing-function: ease-out;

  .mds-c-global-nav--horizontal & {
    @mixin mds-m-screenreader-text;
  }

  .mds-c-navigation.mds-is-collapsed & {
    opacity: 0;
  }

  .mds-c-global-nav__link.mds-is-active &,
  .mds-c-global-nav__link:enter & {
    color: var(--mds-v-global-nav__color--hover);
  }
}