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;
  line-height: 1.95;
  opacity: .7;
  outline: none;
  padding: 0;
  transition: box-shadow .5s, background-color .5s, color .5s;
  width: 1.8em;

  &.active {
    box-shadow: 0 0 0 2px $color-primary;
  }

  &:hover {
    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);
      }
    }
  }

  // Tooltip
  &[data-tooltip] {
    &::after {
      background:  $color-black;
      border-radius: 3px;
      color: $color-white;
      content: attr(data-tooltip);
      font-family: $font-family;
      font-size: $font-size;
      padding: 0 12px;
      position: absolute;
      transform: translate(45px, 52px);
      visibility: hidden;
      white-space: nowrap;
    }

    &:hover {
      &::after {
        transition: visibility 0s linear .3s;
        visibility: visible;
      }
    }
  }

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