sparkletown/sparkle

//$primary: #d0021b;
//
//$border-radius: 28px;

// TODO: this wasn't scoped specifically to AvatarGrid, so might be used by something else in the platform accidentally
//div.btn {
//  position: relative;
//  cursor: pointer;
//  text-decoration: none;
//  display: inline-block;
//  padding: 1em 20px 1em;
//  font-size: 1em;
//  font-weight: 500;
//  border: none;
//  background-color: transparent;
//  color: $accent--under;
//  box-shadow: inset 0 0 0 3px $accent--under;
//  transition: box-shadow 400ms, background-color 400ms, color 400ms,
//    opacity 400ms, transform 1400ms $transition-function;
//  border-radius: $border-radius;
//  transform: translateY(0px);
//
//  &.btn-big {
//    padding: 1em 30px 1em;
//    font-size: 1.2em;
//  }
//  &.btn-small {
//    padding: 0.7em 5px 0.7em;
//    font-size: 0.8em;
//  }
//  &:hover {
//    color: var(--accent--under-darker-5pp);
//    box-shadow: inset 0 0 0 3px var(--primary--under-20a);
//    transform: translateY(-1px);
//  }
//
//  &.btn-primary {
//    background-color: $accent--under;
//    color: $content--over;
//    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
//
//    &:hover {
//      color: $content--over;
//      background-color: var(--accent--under-darker-5pp);
//    }
//  }
//
//  &.btn-link {
//    color: $accent--under;
//    background-color: transparent;
//
//    &:after {
//      content: "";
//      position: absolute;
//      height: 2px;
//      bottom: 6px;
//      left: 20px;
//      width: calc(100% - 40px);
//      background-color: var(--primary--under-20a);
//    }
//
//    &:hover {
//      color: var(--accent--under-darker-20pp);
//      &:after {
//        background-color: var(--primary--under-50a);
//      }
//    }
//
//    &.btn-link_disabled {
//      color: opaque-black(0.5);
//      cursor: auto;
//      &:after {
//        display: none;
//      }
//    }
//  }
//  &.btn-white {
//    background-color: white;
//    color: $content--under;
//    box-shadow: none;
//    &:hover {
//      color: opaque-black(0.6);
//    }
//    &:disabled {
//      background-color: opaque-white(0.1);
//      color: opaque-white(0.6);
//    }
//  }
//  &.btn-block {
//    display: block;
//    text-align: center;
//  }
//  &.btn-disabled {
//    cursor: not-allowed;
//    background-color: $content--under;
//    box-shadow: none;
//    color: opaque-white(0.6);
//  }
//}