.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: {
    family: $ff-base;
    size: $fs-medium;
    weight: $fw-medium;
  }

  padding: 9px 24px;
  border: 1px solid;
  border-radius: 5px;
  line-height: 1.5rem;
  transition: $transition-base;
  cursor: pointer;
  text: {
    decoration: none;
  }

  &:hover {
    text-decoration: none;
  }

  &[disabled] {
    user-select: none;
    cursor: default;
  }
  &--small {
    font: {
      family: $ff-base;
      size: $fs-small;
      weight: $fw-regular;
    }
    line-height: 1.25rem;
    padding: 5px 15px;
  }

  &--primary {
    color: $white;
    background-color: map-get($orange, 2);
    border-color: map-get($orange, 2);
    &:not([disabled]):hover {
      border-color: map-get($orange, 1);
      background-color: map-get($orange, 1);
    }
    &[disabled] {
      opacity: 0.5;
    }
  }

  &--secondary {
    color: map-get($dark-blue, 1);
    background-color: $white;
    border-color: transparentize(map-get($dark-blue, 1), 0.8);
    &:not([disabled]):hover {
      border-color: map-get($dark-blue, 1);
      color: map-get($dark-blue, 1);
    }
    &[disabled] {
      color: rgba(map-get($dark-blue, 1), 0.4);
      background-color: rgba(map-get($dark-blue, 1), 0.1);
      border-color: rgba(map-get($dark-blue, 1), 0.01);
    }
  }

  &--warning {
    color: map-get($red, 1);
    background-color: $white;
    border-color: transparentize(map-get($red, 1), 0.3);
    &:not([disabled]):hover {
      border-color: map-get($red, 1);
      color: map-get($red, 1);
    }
    &[disabled] {
      color: rgba(map-get($red, 1), 0.4);
      background-color: rgba(map-get($red, 1), 0.1);
      border-color: rgba(map-get($red, 1), 0.01);
    }
  }

  &--full-width {
    width: 100%;
  }

  &__loader {
    margin-right: 10px;
  }
}
