.button {
  cursor: pointer;
  border-radius: 6px;
  height: 42px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01px;
  white-space: nowrap;
  transition: all ease-in-out 0.3s;
  overflow: hidden;
  @include display-flex(center, center);

  &-text {
    @include display-flex(flex-start, flex-start);
  }

  .okra-loader {
    position: absolute;
    opacity: 0;
    transition: all ease-in-out 0.3s;
  }

  &.loading {
    pointer-events: none;

    * {
      transition: all ease-in-out 0.3s;
      opacity: 0;
    }

    .okra-loader {
      opacity: 1;
    }
  }

  &.sm-button {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.01px;
    height: 32px;
  }

  &.xs-button {
    height: 24px;
    font-size: 12px;
    line-height: 18px;
    padding: 0 8px;
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    box-shadow: none;

    &:active,
    &:hover,
    &:focus,
    &.active,
    &.hover,
    &.focus {
      box-shadow: none;
    }
  }
}

.primary-button {
  background: $primary;
  color: $white;

  &:active,
  &:hover,
  &:focus,
  &.active,
  &.hover,
  &.focus {
    background: $dark-green;
  }

  &:disabled,
  &.disabled {
    background: $light-green;
  }
}

.secondary-button {
  background: $white;
  border: 2px solid $primary;
  color: $primary;

  &:active,
  &:hover,
  &:focus,
  &.active,
  &.hover,
  &.focus {
    border-color: $dark-green;
  }

  &:disabled,
  &.disabled {
    border-color: $light-grey;
    color: $grey;
  }
}

.tertiary-button {
  background: $light;
  border: 1px solid $light-grey;
  color: $dark-grey;

  &:disabled,
  &.disabled {
    border-color: transparent;
    color: $grey;
  }
}

.primary-text-button,
.secondary-text-button {
  background: transparent;
  border: 0;
  padding: 8px;
  height: auto;
  min-width: auto;
  margin-left: -8px;

  &:hover,
  &.hover {
    box-shadow: none;
  }
}

.primary-text-button {
  color: $primary;

  &:hover,
  &.hover {
    background: $light-green-2;
  }

  &:disabled,
  &.disabled {
    background: transparent;
    color: $grey;
  }
}

.secondary-text-button {
  color: $dark-grey;

  &:hover,
  &.hover {
    background: $light;
  }

  &:disabled,
  &.disabled {
    background: transparent;
    color: $grey;
  }
}

.icon-button {
  div {
    @include display-flex(flex-start, flex-start);

    &:first-of-type {
      margin-right: 8px;
    }
  }

  .button-icon {
    width: 16px;
  }

  &.sm-button {
    .button-icon {
      width: 11px;
    }
  }
}

.focused {
  box-shadow: $button-shadow;
}