@keyframes pulse {
  0% { opacity: .25; }
  25% { opacity: .25; }
  35% { opacity: 1; }
  55% { opacity: 1; }
  75% { opacity: .25; }
  100% { opacity: .25; }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.wrapper {
  color: #82828c;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 0;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  text-decoration: none;
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  height: 48px;
}
.wrapper:focus {
    box-shadow: inset 0 0 0 2px #e4e4e6;
  }
.wrapper:hover {
    background-color: #e9e8ff;
    color: #82828c;
    cursor: pointer;
    text-decoration: none;
  }
.wrapper:after {
    content: '';
    position: absolute;
    display: block;
    box-shadow: inset 0px -3px 0px 0px #4f1fff;
    height: 3px;
    width: 100%;
    bottom: 0;
    left: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    transform: scale(0, 1);
  }
.is-active.wrapper {
    color: #1a1c20;
  }
.is-active:after {
    transform: scale(1, 1);
  }
