.button {
  @include textstyle-bodybold;
  background-color: $color-interactive1;
  border-radius: 500px; // High value creates pill shape
  color: $color-light1;
  display: inline-block;
  padding: $gridspacing ($gridspacing * 2);
  transition: background-color $transition-duration $transition-easing,
              color $transition-duration $transition-easing,
              opacity $transition-duration $transition-easing;
  will-change: background-color, color, opacity;

  svg {
    display: block;
    fill: $color-light1;
    height: 32px;
    transition: fill $transition-duration $transition-easing;
    width: 32px;
    will-change: fill;
  }

  &:hover:enabled {
    background-color: $color-light2;
    color: $color-interactive1;

    svg {
      fill: $color-interactive1;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .5;
  }

}

.button-inverse {
  background-color: $color-light1;
  color: $color-interactive1;

  svg {
    fill: $color-interactive1;
  }

  &:hover:enabled {
    background-color: $color-interactive1;
    color: $color-light1;

    svg {
      fill: $color-light1;
    }
  }
}

.button-secondary {
  background-color: transparent;
  color: $color-interactive1;

  &:hover:enabled {
    background: transparent;
    text-decoration: underline;
  }
}

.button-icon {
  @extend .button-secondary;
}

.button-dropshadow {
  box-shadow: 0 10px 20px 0 rgba($color-dark1, 0.7);
}