.no-js .user-toggle {
  display: none;
}

.user-toggle {
  margin-left: 1.5em;

  button {
    background: transparent;
    border: none;
    display: block;
    color: #FFF;
    color: var(--text-white);
    vertical-align: middle;
    padding: 0;
    margin-top: 0.25em;
    height: 1.6875em;
    cursor: pointer;

    svg {
      vertical-align: bottom;
      font-size: 1.5em;
      width: 1em;
      height: 1em;
      display: block;
      transition: transform 1s cubic-bezier(.18,1.64,.66,.94);
    }
    &:focus,
    &:active {
      outline: none;
    }

    &:hover svg,
    &:focus svg {
      transform: rotate(540deg);
    }

    &:focus svg {
      outline: 1px dashed;
      outline-offset: 0.3em;
    }
  }
}