.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(from var(--primary-color) h s 5 / 0.95);
  backdrop-filter: blur(2px);
  z-index: 99;
  pointer-events: none;

  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;

  opacity: 0;
  transform: scale(1.05);

  &.open {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
  }

  ul {
    /* height: 100%; */
    align-items: center;
    justify-content: start;
    margin-top: calc(var(--spacing-lg) * 2);
    gap: var(--spacing-lg);

    li {
      display: inline-block;
      width: 100%;
      padding-inline: var(--spacing-md);
      position: relative;
      opacity: 0;
      top: -3rem;

      transition-property: top, opacity;
      transition-duration: 0.3s;
      transition-timing-function: ease;

      .open & {
        top: 0;
        opacity: 1;

        &:nth-child(1) {
          transition-delay: 0.1s;
        }
        &:nth-child(2) {
          transition-delay: 0.2s;
        }
        &:nth-child(3) {
          transition-delay: 0.3s;
        }
        &:nth-child(4) {
          transition-delay: 0.4s;
        }
        &:nth-child(5) {
          transition-delay: 0.5s;
        }
      }

      a {
        font-size: 1.25rem;
        color: var(--white);

        text-shadow: 0 0.5px 0 hsl(from var(--accent-color) h s 50 / 1),
          0 2px 0.5rem hsl(from var(--accent-color) h s 50 / 0.15),
          0 0 2rem hsl(from var(--accent-color) h 200% l / 0.25);

        &.highlighted {
          display: inline-block;
          padding: 0.5em 0.85em;
          background-color: var(--primary-color);
          border-radius: var(--radius-md);
          border: 1px solid hsl(from var(--accent-color) h s l / 0.5);

          color: var(--white);
          background: linear-gradient(
            45deg,
            hsl(from var(--accent-color) h s 32),
            hsl(from var(--accent-color) h s 45)
          );
          /* background-repeat: no-repeat, no-repeat; */

          display: inline-block;
          font-weight: 500;
          border: 1px solid hsl(from var(--accent-color) h s l / 0.5);
          text-decoration: none;

          box-shadow: var(--glowing-shadows);
          transition: box-shadow 0.15s ease;
          &:hover {
            box-shadow: var(--glowing-shadows-hover);
          }
        }
      }
    }

    .dimmed {
      display: inline-block;
      margin-top: 3rem;
      color: var(--color-dimmed);
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      transition: color 0.3s ease;
    }
  }
}

.mobile-nav-close {
  position: absolute;
  top: 1rem;
  right: var(--spacing-md);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  opacity: 0.75;

  svg {
    width: 100%;
    height: auto;
    fill: currentColor;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 1;
    }
  }
}

.mobile-nav-logo {
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  /* width: var(--logo-size); */
  /* height: var(--logo-size); */
  /* border-radius: 50%; */
  overflow: hidden;
  /* background-color: var(--white); */
  color: hsl(from var(--white) h s l / 0.15);
  z-index: -1;
}