button-colors($fg, $bg = #fff, $border = transparent) {
  border: 1px solid $border;
  background: $bg;
  color: $fg;

  > svg {
    transition: fill .1s ease-out;
    fill: $fg;
  }
}

$block = ".button";

{$block} {
  $border-radius = 3px;
  $c-standard-hover = $c-brand-lightest;
  $c-standard-focus = $c-brand-base;
  $c-inactive-fg = $c-gray-lightest;
  $c-inactive-bg = $c-gray;
  $c-standard-fg = $c-white-base;
  $c-primary-default = $c-brand-base;
  $c-primary-success = $c-success-base;
  $c-primary-warning = $c-warning-base;
  $c-primary-danger = $c-danger-base;
  $c-primary-disabled = $c-gray-base;
  $c-hover-default = $c-brand-light;
  $c-hover-success = $c-success-light;
  $c-hover-warning = $c-warning-light;
  $c-hover-danger = $c-danger-light;
  $c-hover-ghost = $c-gray-lighter;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 6px;
  min-height: 36px;
  border-radius: $border-radius;
  text-decoration: none;
  transition: background-color .1s ease-out, color .1s ease-out;

  > span {
    margin: 0 6px;
    min-width: 56px;
  }

  > svg {
    margin-top: -4px;
    margin-bottom: -4px;
  }

  &--compact {
    > span {
      margin: 0 2px;
    }
  }

  a& {
    display: inline-flex;
  }

  &:hover {
    button-colors($c-primary-fg, $c-standard-hover, $c-standard-hover);
  }

  &--primary:hover {
    button-colors($c-standard-fg, $c-standard-hover, $c-standard-hover);
  }

  &:focus {
    outline: 1px dotted $c-standard-focus;
  }

  &[disabled] {
    &:hover {
      cursor: not-allowed;
    }
  }

  &--ghost {
    button-colors($c-primary-default, transparent);
  }

  &--primary {
    &{$block}--default {
      button-colors($c-standard-fg, $c-primary-default, $c-primary-default);
    }

    &{$block}--success {
      button-colors($c-standard-fg, $c-primary-success, $c-primary-success);
    }

    &{$block}--warning {
      button-colors($c-standard-fg, $c-primary-warning, $c-primary-warning);
    }

    &{$block}--danger {
      button-colors($c-standard-fg, $c-primary-danger, $c-primary-danger);
    }

    &{$block}--inverted {
      button-colors($c-standard-fg, rgba(255, 255, 255, .3), transparent);
    }

    &[disabled] {
      button-colors($c-standard-fg, $c-primary-disabled, $c-primary-disabled);
    }
  }

  &--standard {
    &{$block}--default {
      button-colors($c-primary-default, $c-white-base, $c-primary-default);
    }

    &{$block}--success {
      button-colors($c-primary-success, transparent, $c-primary-success);
    }

    &{$block}--warning {
      button-colors($c-primary-warning, transparent, $c-primary-warning);
    }

    &{$block}--danger {
      button-colors($c-primary-danger, transparent, $c-primary-danger);
    }

    &{$block}--inverted {
      button-colors($c-standard-fg, transparent, $c-standard-fg);
    }

    &[disabled] {
      button-colors($c-primary-disabled, transparent, $c-primary-disabled);
    }
  }

  &{$block}--active {
    button-colors($c-standard-fg, $c-brand-light, $c-brand-light);

    &:hover {
      button-colors($c-standard-fg, $c-brand-light, $c-brand-light);
    }
  }

  &--default:hover {
    button-colors($c-standard-fg, $c-hover-default, $c-hover-default);
  }

  &--success:hover {
    button-colors($c-standard-fg, $c-hover-success, $c-hover-success);
  }

  &--warning:hover {
    button-colors($c-standard-fg, $c-hover-warning, $c-hover-warning);
  }

  &--danger:hover {
    button-colors($c-standard-fg, $c-hover-danger, $c-hover-danger);
  }

  &--inverted:hover {
    button-colors($c-standard-fg, rgba(255, 255, 255, .2), $c-standard-fg);
  }

  &--ghost:hover {
    button-colors($c-primary-default, $c-hover-ghost, $c-hover-ghost);
  }

  &--ghost {
    &[disabled] {
      border-color: transparent;

      &:hover {
        background: none;
        color: $c-primary-disabled;

        svg {
          fill: $c-primary-disabled;
        }
      }
    }
  }

  &--icon {
    &{$block}--started .icon {
      animation: button-spin-animation 1.5s ease-in-out infinite;
    }

    &--left {
      svg {
        margin-right: 4px;
      }

      > span {
        margin: 0 4px 0 0;
        min-width: 0;
        text-align: left;
      }
    }

    &--right {
      svg {
        margin-left: 4px;
      }

      > span {
        margin: 0 0 0 4px;
        min-width: 0;
        text-align: left;
      }
    }
  }

  &--no-round-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &--no-round-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &--small {
    box-sizing: border-box;
    padding: 4px;
    min-height: 32px;
    font-size: 12px;

    > svg {
      width: 20px;
      height: 20px;
    }

    &.button--icon {
      &--left {
        svg {
          margin-right: 2px;
        }
      }

      &--right {
        svg {
          margin-left: 2px;
        }
      }
    }
  }

  &--large {
    box-sizing: border-box;
    padding: 12px;
    min-height: 50px;
    font-size: 16px;

    > svg {
      width: 24px;
      height: 24px;
    }
  }
}

@keyframes button-spin-animation {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}