%button-primary {
  color: $white;
  background: var(--nd-color-link);
  border: 1px solid transparent;

  i {
    color: $white;
  }
}

%button-secondary {
  background: $white;
  color: var(--nd-color-link);
  border: 1px solid var(--nd-color-link);

  i {
    color: var(--nd-color-link);
  }

  .icon-divider {
    border-color: var(--nd-color-link);
  }

  .nd-loader {
    .loading-dot {
      background: var(--nd-color-link);
    }
  }
}

%button-warning {
  color: $white;
  background: var(--nd-color-failure);
  border-color: var(--nd-color-failure);

  i {
    color: $white;
  }
}

%nd-button {
  @include rem(8);
  position: relative;
  padding: $default-spacing;
  border-radius: 0;
  user-select: none;
  outline: none;
  font-weight: 700;
  transition: $default-transition;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  margin-right: $default-spacing;

  i {
    position: relative;
    z-index: 1;
  }

  &.success {
    background: var(--nd-color-success);
  }

  &.failure {
    background: var(--nd-color-failure);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: $default-transition;
  }

  &:hover {
    &::after {
      opacity: 1;
    }
  }

  &:last-of-type {
    margin-right: 0;
  }

  .nd-loader {
    align-self: center;
    padding: 0;
  }
}

.nd-button--primary {
  @extend %nd-button;
  @extend %button-primary;
}

.nd-button--secondary {
  @extend %nd-button;
  @extend %button-secondary;
}

.nd-button--warning {
  @extend %nd-button;
  @extend %button-warning;
}

.nd-button-group {
  display: flex;
}

.nd-button--submitting::before {
  display: none;
}

.nd-button--icon::before {
  @extend %icon;
  padding-right: $default-spacing;
}

.nd-button--save::before {
  content: '\e905';
}

.nd-button--edit::before {
  content: '\e90f';
}

.nd-button--download::before {
  content: '\e930';
}

.nd-button--trash::before {
  content: '\e917';
}