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

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

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

  @if $shadows == 1 {
    &.shadow {
      @include shadow(1);

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

      &:active {
        box-shadow: inset 0 5px 20px transparentize($color-black, .81), inset 0 3px 6px transparentize($color-black, .77);
      }
    }
  }

  &.close {
    background: none;
    border-radius: 0;
    @if $shadows == 1 {
      box-shadow: none;
    }
    color: transparentize($color-black, .5);
    float: right;
    font-size: $button-font-size;
    height: auto;
    margin: $button-distance;
    width: auto;
  }
}