$border-radius = 3px;
$tooltip-border-width = 1px;
$tooltip-arrow-size = 10px;
$tooltip-transition = all .2s ease-in-out;

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

  > svg {
    fill: $fg;
  }
}

$block = ".button";

{$block} {
  position: relative;
  transition: background-color .2s ease-out;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 16px;
  height: 33px;
  border-radius: $border-radius;
  display: flex;
  align-items: center;

  &__inner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &--sub-text {
      display: flex;
      flex-direction: column;
      margin: 0;
    }
  }

  a& {
    display: inline-block;
    line-height: 31px;
  }

  &:hover {
    button-colors(white, $brand-lightest, $brand-lightest);
  }

  &:focus {
    outline: 1px dotted $brand-base;
  }

  &[disabled] {
    button-colors($btn-inactive-fg, gray, gray);
  }

  &--ghost {
    border: 0;
    background: none;
  }

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

    &{$block}--success {
      button-colors(white, $success-base, $success-base);
    }

    &{$block}--warning {
      button-colors(white, $warning-base, $warning-base);
    }

    &{$block}--danger {
      button-colors(white, $error-base, $error-base);
    }

    &[disabled] {
      button-colors(white, $gray, $gray);
    }
  }

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

    &{$block}--success {
      button-colors($success-base, white, $success-base);
    }

    &{$block}--warning {
      button-colors($warning-base, white, $warning-base);
    }

    &{$block}--danger {
      button-colors($error-base, white, $error-base);
    }

    &[disabled] {
      button-colors($gray, white, $gray);
    }
  }

  &{$block}--active {
    button-colors(white, $active-base, $active-base);

    &:hover {
      button-colors(white, $active-light, $active-light);
    }
  }

  &--default:hover {
    button-colors(white, $brand-light, $brand-light);
  }

  &--success:hover {
    button-colors(white, $success-light, $success-light);
  }

  &--warning:hover {
    button-colors(white, $warning-light, $warning-light);
  }

  &--danger:hover {
    button-colors(white, $error-light, $error-light);
  }

  &--ghost:hover {
    button-colors(white, $brand-lightest);
    border: 0;
  }

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

  &--icon {
    > svg {
      width: 20px;
      height: 20px;
    }

    &.button--hasChild {
      > svg {
        margin-right: 10px;
      }
    }
  }

  &--large {
    height: 50px;
    font-size: 16px;

    a& {
      line-height: 48px;
    }

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

  &--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;
  }

  &--compact {
    padding: 2px 6px 3px;
  }

  &__tooltip {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 110%;
    z-index: 1;

    pointer-events: none;
    font-size: $font-size-medium;
    background-color: $gray-lightest;
    border: 1px solid $gray-base;
    padding: 6px 16px;
    border-radius: $border-radius;
    box-shadow: -4px 4px 20px 0 rgba(0, 0, 0, .2);
    color: $gray-darker;

    &--flipped {
      right: auto;
      left: 110%;
    }

    &:after, &:before {
      top: 5px;
      right: -($tooltip-arrow-size + 1);
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-color: transparent;
      border-left-color: $gray-lightest;
      border-width: $tooltip-arrow-size + $tooltip-border-width;
      margin-right: -($tooltip-arrow-size);
    }

    &:before {
      border-color: transparent;
      border-left-color: $gray-base;
      border-width: $tooltip-arrow-size + $tooltip-border-width;
      margin-right: -($tooltip-arrow-size + $tooltip-border-width);
    }

    &--flipped {
      &:after, &:before {
        left: -($tooltip-arrow-size + 1);
        border-color: transparent;
      }

      &:after {
        border-right-color: $gray-lightest;
        margin-left: -($tooltip-arrow-size);
      }

      &:before {
        border-right-color: $gray-base;
        margin-left: -($tooltip-arrow-size + $tooltip-border-width);
      }
    }
  }

  &:hover > .button__tooltip {
    opacity: 1;
    transition: $tooltip-transition;
  }

  &--large .button__tooltip {
    top: 8px;
  }

}

@keyframes spin-animation {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}