button,
input,
a {
  &.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--form-height);
    padding: 0 var(--button-padding-x);
    font-size: var(--form-font-size);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--input-border-radius);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &.btn-primary {
      color: var(--c-white);
      background-color: var(--c-primary-200);
      svg {
        path {
          fill: var(--c-white);
        }
      }
      &:hover {
        background-color: var(--c-gray-500);
      }
      &:disabled {
        color: var(--c-gray-200);
        background-color: var(--c-gray-50);
        cursor: default;
      }
    }
    &.btn-light {
      color: var(--c-primary-200);
      background-color: transparent;
      border: var(--button-border);
      &:hover {
        color: var(--c-white);
        background-color: var(--c-primary-200);
      }
      &:disabled {
        color: var(--c-gray-200);
        background-color: var(--c-gray-50);
        border-color: transparent;
        cursor: default;
      }
    }
    &.btn-transparent {
      color: var(--c-primary-200);
      background-color: transparent;
      &:hover {
        background-color: var(--c-info-25);
      }
      &:disabled {
        color: var(--c-gray-300);
        background-color: var(--c-gray-50);
        border-color: var(--c-gray-100);
        cursor: default;
      }
    }
    &.small {
      height: var(--form-height-small);
      padding: 0 var(--button-padding-x-small);
      font-size: var(--form-font-size-small);
    }
  }
}