@import 'mixins/components.buttons';

.c-button {
  --button-color: #fff;
  --button-background-color: var(--color-default);

  @include button;

  &.c-button--close {
    --button-color: inherit;
    --button-background-color: transparent;

    @include button-color;

    position: absolute;
    right: var(--spacing-small);
    padding: 0;
    font-weight: var(--text-font-weight-heavy);
    font-size: 1.4em;
    line-height: 1;
    outline: 0;
  }

  &.c-button--block {
    display: inline-block;
    width: 100%;
  }

  &.c-button--rounded {
    border-radius: var(--border-radius-rounded);
  }

  &.c-button--brand {
    --button-background-color: var(--color-brand);
  }

  &.c-button--info {
    --button-background-color: var(--color-info);
  }

  &.c-button--warning {
    --button-color: #000;
    --button-background-color: var(--color-warning);
  }

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

  &.c-button--error {
    --button-background-color: var(--color-error);
  }

  &.c-button--ghost {
    --button-color: var(--color-default);

    @include button-ghost;

    &.c-button--brand {
      --button-color: var(--color-brand);
    }

    &.c-button--info {
      --button-color: var(--color-info);
    }

    &.c-button--warning {
      --button-color: var(--color-warning);
    }

    &.c-button--success {
      --button-color: var(--color-success);
    }

    &.c-button--error {
      --button-color: var(--color-error);
    }
  }

  &.c-button--nude {
    @include button-nude;
  }
}

.c-button__icon-left {
  padding-right: var(--spacing-small);
}

.c-button__icon-right {
  padding-left: var(--spacing-small);
}