.UserSideNav {
  margin-bottom: var(--spaceMd);
  position: relative;
}

@media (max-width: 48rem) {
  .UserSideNav {
    margin: calc(var(--spaceMd) * -1) calc(var(--spaceMd) * -1) var(--spaceMd);
  }
}

.UserSideNav-opener {
  padding: 0.9rem 1.2rem;
  background: var(--colorBrand);
  color: hsl(0, 0%, calc((var(--colorBrand-l) - 60) * -100%));
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: space-between;
  font-size: var(--textSm);
  transition: var(--animationBase);
  display: none;
}

@media (max-width: 48rem) {
  .UserSideNav-opener {
    display: flex;
  }
}

.UserSideNav-opener:hover, .UserSideNav-opener:active, .UserSideNav-opener:focus {
  background: hsl(var(--colorBrand-h), calc(var(--colorBrand-s) * 1%), calc(var(--colorBrand-l) * 0.8 * 1%));
}

.UserSideNav-opener svg {
  transition: var(--animationBase);
}

.UserSideNav.is-opened .UserSideNav-opener svg {
  transform: rotate(-180deg);
}

.UserSideNav-list {
  padding: 1.2rem;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--animationBase);
  width: 100%;
  border-radius: .3125rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 48rem) {
  .UserSideNav-list {
    max-height: 0;
    padding: 0 1.2rem;
  }
}

@media (max-width: 48rem) {
  .UserSideNav.is-opened .UserSideNav-list {
    padding: 1.2rem;
    max-height: 2000px;
  }
}

.UserSideNav-item a {
  display: flex;
  align-items: center;
  font-weight: 700;
  padding: var(--spaceXs);
  transition: var(--animationBase);
}

.UserSideNav-item a svg {
  color: var(--colorText);
  width: 1.3em;
  height: 1.3em;
  margin-right: var(--spaceRg);
}

.UserSideNav-itemActive {
  background: var(--colorBrand);
  color: #fff;
}

.UserSideNav-item.is-small svg {
  margin: 0 22px 0 5px;
}

.UserSideNav-item.is-small a {
  font-size: .8em;
}

.UserSideNav-item.sep {
  border-top: 1px dashed #cecece;
}

/*# sourceMappingURL=user-side-nav.min.css.map */