body {

  [visible-on="desktop"] {
    display: none;
  }

  [visible-on="mobile"] {
    display: unset;
  }

  header nav cv-menu {
    ul li {
      display: none;
    }

    a.menu {
      display: block;
      text-align: right;
      padding: var(--spacing);

      i {
        vertical-align: middle;
      }
    }

    ul ul li {
      padding-left: calc(var(--spacing) * 4) !important;
    }

    &.responsive {
      position: relative;

      .menu {
        position: absolute;
        right: 0;
        top: 0;
      }

      ul {
        position: relative !important;
        background: none;
        box-shadow: none;

        li a i:first-child {
          margin-left: 0;
        }
      }

      > ul {
        margin: var(--spacing);
      }

      li {
        display: block;
        text-align: left;
        width: 100%;
        height: fit-content;

        > a {
          padding-left: 0;

          i {
            margin-right: var(--spacing);
          }
        }

        > .details > .summary {
          padding-left: 0;
          .expander {
            display: none;
          }
        }
      }
    }
  }

  footer > nav > cv-menu ul li:last-child .details ul {
      right: 0
  }

  cv-popup, cv-tile.popup {
    bottom: 0;
    left: 0;
    top: unset;
    transform: unset;
    z-index: 1000000;
    /*box-shadow: 6px 6px 18px 4px $shadowColor;*/
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-sizing: border-box;
    border: none;
  }
}

