button {
  background: $color-white;
  border: 0;
  border-radius: .9em;
  color: $color-black;
  cursor: pointer;
  font-family: $font-family-icons;
  font-size: 20pt;
  height: 1.8em;
  opacity: .7;
  outline: none;
  transition: box-shadow .5s, color .5s;
  width: 1.8em;

  &.active {
    color: $color-primary;
  }

  &:hover {
    background: $color-white;
    color: $color-primary;
  }

  &.shadow {
    @include shadow(1);

    &:hover {
      @include shadow(2);
    }

    &:active {
      box-shadow: inset 0 5px 20px rgba($color-black, .19), inset 0 3px 6px rgba($color-black, .23);
    }
  }

  &.close {
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: rgba($color-black, .5);
    float: right;
    font-size: 20pt;
    height: auto;
    margin: $buttondistance;
    width: auto;
  }
}