.buttons {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.btn {
  backface-visibility: hidden;
  background-color: transparent;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 38px;
  line-height: 38px;
  margin: .5em;
  padding: 0 30px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    filter: brightness(65%);
    transition: filter 200ms ease;
  }

  @each $name, $code in $colours {
    &.#{$name}-dropshadow { @include dropshadow-hover($code); }
  }

  &.no-dark-hover {
    &:hover { filter: brightness(100%); }
  }

  &.animation {
    animation: button-enter 1s ease-in-out forwards;
    opacity: 0;
    position: relative;

    @for $x from 1 through 15 {
      &:nth-child(#{$x}) {
        animation-delay: $x * .25s;
      }
    }
  }

  &.hover-scale {
    transition: transform 200ms ease;
    &:hover { transform: scale(1.05); }
  }

  &.hover-scale-inset {
    transition: transform 200ms ease;
    &:hover { transform: scale(.95);}
  }

  &.hover {
    transition: transform 200ms ease;
    &:hover { transform: translateY(-.5em); }
  }
}
