#side-menu {
  width: 270px;
  position: fixed;
  top: 0;
  left: -270px;
  height: 100vh;
  z-index: 999;
  background-color: map_get($theme-colors, white);
  transition: all 0.3s;
  ul.social {
    list-style: none;
    display: inline-flex;
    justify-content: center;
    padding-left: 0;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid map_get($theme-colors, border-light);
    li.nav-item.menu-item {
      a.nav-link {
        border: none;
        &:hover {
          transition: all 200ms linear;
          color: map_get($theme-colors, border-primary);
        }
        svg.svg-inline--fa.fa-facebook {
          color: #3C5999;
        }
        svg.svg-inline--fa.fa-linkedin {
          color: #0077b5;
        }
        svg.svg-inline--fa.fa-instagram * {
          fill: url(#rg);
        }
        svg.svg-inline--fa {
          transition: all 200ms linear;
        }
        svg.svg-inline--fa {
          transition: all 700ms linear;
          width: 2em;
          height: 2em;
        }
      }
    }
  }
  ul {
    li.nav-item.menu-item {
      a.nav-link {
        @include font(sans-serif, medium);
        @include font-size(text-large);
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid map_get($theme-colors, border-light);
        transition: all 0.3s;
        color: map_get($theme-colors, secondary);
        &::after {
          align-self: center;
        }
        &:hover {
          color: map_get($theme-colors, tertairy);
          background: map_get($theme-colors, background-secondary);
        }
      }
    }
    li.active.nav-item.menu-item {
      a.nav-link {
        background: map_get($theme-colors, background-secondary);
        &:hover {
          color: map_get($theme-colors, tertairy);
          background: map_get($theme-colors, primary);
        }
      }
    }
    li.nav-item.menu-item.dropdown.menu-item-has-children {
      a.nav-link.dropdown-toggle {
        &::after {
          border-top: 0.4em solid;
          border-right: 0.4em solid transparent;
          border-left: 0.4em solid transparent;
        }
      }
      a.nav-link.dropdown-toggle[aria-expanded="true"] {
        background: map_get($theme-colors, background-secondary);
        border-bottom: none;
        &::after {
          border-left: 0.4em solid;
          border-top: 0.4em solid transparent;
          border-bottom: 0.4em solid transparent;
          border-right: 0;
        }
        &:hover {
          color: map_get($theme-colors, tertairy);
          background: map_get($theme-colors, primary);
        }
      }
      ul.dropdown-menu {
        padding: 0;
        border-radius: 0;
        border: none;
        margin: 0;
      }
      ul.dropdown-menu.show {
        transform: none !important;
        position: relative !important;
        li.nav-item.menu-item {
          a.nav-link {
            background: map_get($theme-colors, background-secondary);
            padding-left: 2rem;
            background: darken(map_get($theme-colors, background-secondary), 5);
            @include font-size(text-small);
            &:hover {
              color: map_get($theme-colors, tertairy);
              background: map_get($theme-colors, primary);
            }
          }
        }
      }
    }
  }
}

#side-menu.active {
  left: 0;
}

// Make menu scrollable.
#side-menu-list {
  height: 100%;
}

// Sets content wrapper to be 100% of viewport.
#wrapper {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

// Sets overlay for Side-Menu & Side-Cart.
#overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  display: none;
}