/*
  Copyright (c) 2026 Rich Pin Software. All rights reserved.

  Content: Active, Hover and Focus States
*/

body.nav-open {
  & header {
    & svg:first-child {
      display: none;
    }
    & svg:last-child {
      display: block;
    }
  }

  & main .nav-links {
    position: relative;
    z-index: 1000;
    color: var(--color-light);
    width: 40vw;

    & li:hover {
      background-color: var(--color-shade);
      cursor: pointer;
    }
  }

  @media (max-width: 500px) {
    & main .nav-links {
      width: 60vw;
    }
  }
}