@boxyhq/svelte-ui/dist/shared/Button/index.module.css

Svelte UI components from BoxyHQ

@import url('../common.module.css');

.btn {
  display: inline-flex;
  padding: 0.5rem 1rem;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  background: var(--primary-color);
  color: #fff;
  font-family: sans-serif;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition:
    background 250ms ease-in-out,
    transform 150ms ease;
  appearance: none;
}

.primary:hover,
.primary:focus-visible {
  background: var(--primary-hover);
}

.btn:focus-visible {
  outline: solid var(--ring-offset-color) var(--ring-offset-width);
  outline-offset: var(--ring-offset);
}

.primary:active:not(:disabled) {
  background: var(--primary-active);
  transform: scale(0.99);
}

.btn:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.secondary {
  background: var(--secondary-color);
  color: var(--primary-text-color);
}

.outline {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

.outline:disabled {
  background-color: oklch(0.385412 0.024038 262.829 / 0.2);
}

.outline:not(:disabled):hover {
  background-color: oklch(0.2 0 0);
  color: oklch(1 0 0);
}

.outline:focus-visible {
  box-shadow: none;
  outline-color: oklch(0.2 0 0);
}

.destructive {
  background: #ef4444;
}

.loading {
  animation: spin 1s linear infinite;
}

.icon {
  width: 1rem;
  height: 1rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9zaGFyZWQvQnV0dG9uL2luZGV4Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiaW5kZXgubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgdXJsKCcuLi9jb21tb24ubW9kdWxlLmNzcycpO1xuXG4uYnRuIHtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIHBhZGRpbmc6IDAuNXJlbSAxcmVtO1xuICBtYXJnaW46IDA7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBnYXA6IDAuNXJlbTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cyk7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgYmFja2dyb3VuZDogdmFyKC0tcHJpbWFyeS1jb2xvcik7XG4gIGNvbG9yOiAjZmZmO1xuICBmb250LWZhbWlseTogc2Fucy1zZXJpZjtcbiAgZm9udC1zaXplOiAxcmVtO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgdHJhbnNpdGlvbjpcbiAgICBiYWNrZ3JvdW5kIDI1MG1zIGVhc2UtaW4tb3V0LFxuICAgIHRyYW5zZm9ybSAxNTBtcyBlYXNlO1xuICBhcHBlYXJhbmNlOiBub25lO1xufVxuXG4ucHJpbWFyeTpob3Zlcixcbi5wcmltYXJ5OmZvY3VzLXZpc2libGUge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1wcmltYXJ5LWhvdmVyKTtcbn1cblxuLmJ0bjpmb2N1cy12aXNpYmxlIHtcbiAgb3V0bGluZTogc29saWQgdmFyKC0tcmluZy1vZmZzZXQtY29sb3IpIHZhcigtLXJpbmctb2Zmc2V0LXdpZHRoKTtcbiAgb3V0bGluZS1vZmZzZXQ6IHZhcigtLXJpbmctb2Zmc2V0KTtcbn1cblxuLnByaW1hcnk6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tcHJpbWFyeS1hY3RpdmUpO1xuICB0cmFuc2Zvcm06IHNjYWxlKDAuOTkpO1xufVxuXG4uYnRuOmRpc2FibGVkIHtcbiAgb3BhY2l0eTogNTAlO1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuXG4uc2Vjb25kYXJ5IHtcbiAgYmFja2dyb3VuZDogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLXByaW1hcnktdGV4dC1jb2xvcik7XG59XG5cbi5vdXRsaW5lIHtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBib3JkZXI6IDFweCBzb2xpZCBjdXJyZW50Q29sb3I7XG59XG5cbi5vdXRsaW5lOmRpc2FibGVkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogb2tsY2goMC4zODU0MTIgMC4wMjQwMzggMjYyLjgyOSAvIDAuMik7XG59XG5cbi5vdXRsaW5lOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogb2tsY2goMC4yIDAgMCk7XG4gIGNvbG9yOiBva2xjaCgxIDAgMCk7XG59XG5cbi5vdXRsaW5lOmZvY3VzLXZpc2libGUge1xuICBib3gtc2hhZG93OiBub25lO1xuICBvdXRsaW5lLWNvbG9yOiBva2xjaCgwLjIgMCAwKTtcbn1cblxuLmRlc3RydWN0aXZlIHtcbiAgYmFja2dyb3VuZDogI2VmNDQ0NDtcbn1cblxuLmxvYWRpbmcge1xuICBhbmltYXRpb246IHNwaW4gMXMgbGluZWFyIGluZmluaXRlO1xufVxuXG4uaWNvbiB7XG4gIHdpZHRoOiAxcmVtO1xuICBoZWlnaHQ6IDFyZW07XG59XG5cbkBrZXlmcmFtZXMgc3BpbiB7XG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG59XG4iXX0= */