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;
    border-radius: var(--input-border-radius);
    cursor: pointer;
    svg {
      stroke-width: 1.5;
      width: 16px;
      stroke-linecap: round;
    }
    &.btn-primary {
      color: var(--c-white);
      background-color: var(--c-primary-200);
      svg {
        path {
          stroke: var(--c-white);
        }
      }
      &:hover {
        background-color: var(--c-primary-100);
      }
      &:disabled {
        color: var(--c-gray-200);
        background-color: var(--c-gray-50);
        cursor: default;
        svg {
          path {
            stroke: var(--c-gray-200);
          }
        }
      }
    }
    &.btn-alt {
      padding: 0;
      border-radius: 0;
      border-bottom: 1px solid var(--c-gray-900);
      transition: all 0.2s ease-in-out;
      &:hover {
        color: var(--c-gray-900);
        border-color: var(--c-primary-200);
      }
    }
    &.btn-light {
      color: var(--primary-200);
      background-color: transparent;
      border: var(--button-border);
      svg {
        path {
          stroke: var(--c-primary-200);
        }
      }
      &:hover {
        background-color: var(--c-info-25);
      }
      &:disabled {
        color: var(--c-gray-200);
        background-color: var(--c-gray-50);
        border-color: transparent;
        cursor: default;
        svg {
          path {
            stroke: var(--c-gray-200);
          }
        }
      }
    }
    &.btn-transparent {
      background-color: transparent;
      border: 1px solid var(--c-gray-900);
      transition: all 0.2s ease-in-out;

      padding-inline: 14px;
      border-radius: 0;
      svg {
        path {
          stroke: var(--c-primary-200);
        }
      }
      &:hover {
        color: var(--c-white);
        background-color: var(--c-primary-200);
        border-color: transparent;
      }
      &:disabled {
        color: var(--c-gray-300);
        background-color: var(--c-gray-50);
        border-color: var(--c-gray-100);
        cursor: default;
        svg {
          path {
            stroke: var(--c-gray-300);
          }
        }
      }
    }
    &.btn-icon-left {
      padding-left: var(--button-padding-alt);
      svg {
        margin-right: var(--button-icon-margin);
      }
    }
    &.btn-icon-right {
      padding-right: var(--button-padding-alt);
      svg {
        margin-left: var(--button-icon-margin);
      }
    }
  }
}