/**
 * on mobile devices move navigation to bottom
 */
@media (--lte-mobile) {
  [data-barba="container"] > cp-navigation {
    order: 3;
  }
}

cp-navigation {
  position: sticky;
  z-index: 1;
  background: rgba(from var(--color-back) r g b / 0.85);
  backdrop-filter: blur(2px);
  font-family: var(--font-family-alternate);
  font-size: calc( 1em / var(--font-mod) );
  display: flex;
  gap: .5em;
  padding-bottom: .5rem;
}
@media (--lte-mobile) {
  cp-navigation {
    bottom: 0;
    border-top: 1px solid var(--color-border-light);
  }
}
@media (--gt-mobile) {
  cp-navigation {
    top: 0;
    border-bottom: 1px solid var(--color-border-light);
  }
}

cp-navigation > * {
  width: 25%;
  flex-grow: 1;
}

cp-navigation a {
  display: block;
  text-align: center;
  color: var(--color-link);
  text-decoration: none;
}
cp-navigation .ln svg,
cp-navigation a svg {
  display: block;
  width: 80%;
  height: 80%;
  max-width: 64px;
  max-height: 64px;
  margin: 1em auto 0;
  transition-property: transform, color;
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out-quint);
  vertical-align: top;
  fill: currentColor;
}

cp-navigation a:focus > svg,
cp-navigation a:hover > svg {
  transform: scale(1.33);
}

cp-navigation .meta {
  display: none;
}

cp-navigation .title {
  display: block;
  max-height: 1.5em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl; /* cf. https://davidwalsh.name/css-ellipsis-left a hack to show the ellipsis on the beginning of the string. We do this to prevent unhelpful runs of "LATIN CAPITAL LETT...". */
}
