.prs-btn {
  padding: .25rem 1rem;
  border-width: var(--prs-border-btn);
  border-style: solid;
  border-color: transparent;
  font-weight: var(--prs-fw-button-md);
  font-size: var(--prs-fz-button-md);
  line-height: var(--prs-fl-button-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  text-decoration-line: none;
  border-radius: var(--prs-radius-btn);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);

  &:focus-visible,
  &.prs-btn_focus {
    outline: 2px solid transparent;
    outline-offset: 1px;
  }

  &.prs-btn-sm {
    padding: .25rem .75rem;
    font-size: var(--prs-fz-button-sm);
    line-height: var(--prs-fl-button-sm);
    gap: 0.375rem;
  }

  &.prs-btn-lg {
    padding: calc(.75rem - 1px) 1rem;
    font-size: var(--prs-fz-button-lg);
    line-height: var(--prs-fl-button-lg);
    gap: 0.75rem;
  }

  &.prs-btn-square,
  &.prs-btn-circle {
    padding: 0;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    flex-shrink: 0;
  }

  &.prs-btn-circle {
    border-radius: 9999px;
  }

  &.prs-btn-square.prs-btn-sm,
  &.prs-btn-circle.prs-btn-sm {
    width: 1.5rem;
    height: 1.5rem;
  }

  &.prs-btn-square.prs-btn-lg,
  &.prs-btn-circle.prs-btn-lg {
    width: 3rem;
    height: 3rem;
  }

  svg,
  iconify-icon,
  .icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    display: block;
  }

  &.prs-btn-sm {
    svg,
    iconify-icon,
    .icon {
      width: .875rem;
      height: .875rem;
      font-size: .875rem;
    }
  }

  &.prs-btn-lg {
    svg,
    iconify-icon,
    .icon {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 1.5rem;
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    background-color: var(--prs-c-gray-400);
    color: var(--prs-c-white);
    cursor: not-allowed;
  }

}

.prs-btn-primary {
  background-color: var(--prs-c-primary);
  color: var(--prs-c-white);

  &:hover,
  &.prs-btn_hover {
    background-color: var(--prs-c-primary-900);
  }

  &:focus-visible,
  &.prs-btn_focus {
    background-color: var(--prs-c-primary);
    outline-color: var(--prs-c-primary);
  }

  &.prs-btn-danger {
    background-color: var(--prs-c-danger);
    color: var(--prs-c-white);

    &:hover,
    &.prs-btn_hover {
      background-color: var(--prs-c-danger-800);
      color: var(--prs-c-danger-100);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: var(--prs-c-danger);
      outline-color: var(--prs-c-danger);
    }
  }

  &.prs-btn-success {
    background-color: var(--prs-c-success-900);
    color: var(--prs-c-white);

    &:hover,
    &.prs-btn_hover {
      background-color: var(--prs-c-success-950);
      color: var(--prs-c-white);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: var(--prs-c-success-900);
      outline-color: var(--prs-c-success-900);
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    background-color: var(--prs-c-gray-400);
    color: var(--prs-c-white);
  }
}

.prs-btn-secondary {
  border-color: currentColor;
  background-color: transparent;
  color: var(--prs-c-primary);

  &:hover,
  &.prs-btn_hover {
    border-color: var(--prs-c-primary);
    background-color: var(--prs-c-primary-100);
    color: var(--prs-c-primary);
  }

  &:focus-visible,
  &.prs-btn_focus {
    background-color: inherit;
    outline-color: currentColor;
    color: var(--prs-c-primary);
  }

  &.prs-btn-danger {
    color: var(--prs-c-danger-600);

    &:hover,
    &.prs-btn_hover {
      border-color: var(--prs-c-danger-800);
      background-color: var(--prs-c-danger-100);
      color: var(--prs-c-danger-800);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: inherit;
      outline-color: currentColor;
      color: var(--prs-c-danger);
    }
  }

  &.prs-btn-success {
    color: var(--prs-c-success-900);

    &:hover,
    &.prs-btn_hover {
      border-color: var(--prs-c-success-950);
      background-color: var(--prs-c-success-200);
      color: var(--prs-c-success-950);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: inherit;
      outline-color: currentColor;
      color: var(--prs-c-success-900);
    }
  }

  &:disabled,&:disabled:hover,
  &[aria-disabled="true"],&[aria-disabled="true"]:hover,
  &.prs-btn_disabled,&.prs-btn_disabled:hover {
    border-color: currentColor;
    background-color: transparent;
    color: var(--prs-c-gray-500);
  }
}

.prs-btn-tertiary {
  background-color: transparent;
  color: var(--prs-c-primary);

  &:hover,
  &.prs-btn_hover {
    border-color: currentColor;
    color: var(--prs-c-primary);
    text-decoration: underline;
  }

  &:focus-visible,
  &.prs-btn_focus {
    border-color: transparent;
    background-color: inherit;
    text-decoration: none;
    outline-color: currentColor;
  }

  &.prs-btn-danger {
    color: var(--prs-c-danger-600);
  }

  &.prs-btn-success {
    color: var(--prs-c-success-900);
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    border-color: transparent;
    background-color: transparent;
    color: var(--prs-c-gray-500);
    text-decoration: none;
  }
}