@essential-js/ui/buttons/buttons.css

EssentialJS UI

.essential__button {
  border-radius: 5px;
  padding: 0.5rem 2rem;
  cursor: pointer;
  border: 2px solid transparent;
  font-weight: 500;
  font-family: var(--secondary-font-family);
  transition: all 0.2s ease-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.essential__button:hover {
  background: var(--accent-hover);
}
.essential__button:active {
  background: var(--accent-active);
}
.essential__button.bordered {
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: none;
}
.essential__button.bordered:hover {
  background: var(--accent);
  border: 2px solid transparent;
}
.essential__button.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--accent-active);
}
.essential__button.bordered:active {
  background: var(--accent-active);
}
.essential__button:disabled {
  cursor: not-allowed;
  border: 0;
  background: var(--secondary-background);
  color: var(--disabled-text);
  box-shadow: none;
}
.essential__button.success {
  background: var(--success);
}
.essential__button.success:hover {
  background: var(--text-success);
  color: var(--text-color);
}
.essential__button.success:active {
  background: var(--success);
  box-shadow: none;
}
.essential__button.success.bordered {
  background: transparent;
  border: 2px solid var(--success);
  box-shadow: none;
}
.essential__button.success.bordered:hover {
  background: var(--success);
  border: 2px solid transparent;
}
.essential__button.success.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--success);
}
.essential__button.success.bordered:active {
  background: var(--text-success);
}
.essential__button.success.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.success.shadow {
  box-shadow: 0 0 1rem 0 var(--success);
}
.essential__button.success.shadow:hover {
  background: var(--text-success);
  box-shadow: 0 4px 14px 0 var(--text-success);
}
.essential__button.success.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.success.alter-bordered {
  background: var(--success);
  color: var(--text-success);
  box-shadow: none;
}
.essential__button.success.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--success);
  color: var(--success);
}
.essential__button.success.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--success);
}
.essential__button.success.alter-bordered:active {
  background: var(--text-success);
}
.essential__button.success.alter-bordered:active.shadow {
  box-shadow: none;
}
.essential__button.info {
  background: var(--info);
}
.essential__button.info:hover {
  background: var(--text-info);
  color: var(--text-color);
}
.essential__button.info:active {
  background: var(--info);
  box-shadow: none;
}
.essential__button.info.bordered {
  background: transparent;
  border: 2px solid var(--info);
  box-shadow: none;
}
.essential__button.info.bordered:hover {
  background: var(--info);
  border: 2px solid transparent;
}
.essential__button.info.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--info);
}
.essential__button.info.bordered:active {
  background: var(--text-info);
}
.essential__button.info.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.info.shadow {
  box-shadow: 0 0 1rem 0 var(--info);
}
.essential__button.info.shadow:hover {
  background: var(--text-info);
  box-shadow: 0 4px 14px 0 var(--text-info);
}
.essential__button.info.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.info.alter-bordered {
  background: var(--info);
  color: var(--text-info);
  box-shadow: none;
}
.essential__button.info.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--info);
  color: var(--info);
}
.essential__button.info.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--info);
}
.essential__button.info.alter-bordered:active {
  background: var(--text-info);
}
.essential__button.info.alter-bordered:active.shadow {
  box-shadow: none;
}
.essential__button.error {
  background: var(--error);
}
.essential__button.error:hover {
  background: var(--text-error);
  color: var(--text-color);
}
.essential__button.error:active {
  background: var(--error);
  box-shadow: none;
}
.essential__button.error.bordered {
  background: transparent;
  border: 2px solid var(--error);
  box-shadow: none;
}
.essential__button.error.bordered:hover {
  background: var(--error);
  border: 2px solid transparent;
}
.essential__button.error.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--error);
}
.essential__button.error.bordered:active {
  background: var(--text-error);
}
.essential__button.error.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.error.shadow {
  box-shadow: 0 0 1rem 0 var(--error);
}
.essential__button.error.shadow:hover {
  background: var(--text-error);
  box-shadow: 0 4px 14px 0 var(--text-error);
}
.essential__button.error.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.error.alter-bordered {
  background: var(--error);
  color: var(--text-error);
  box-shadow: none;
}
.essential__button.error.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--error);
  color: var(--error);
}
.essential__button.error.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--error);
}
.essential__button.error.alter-bordered:active {
  background: var(--text-error);
}
.essential__button.error.alter-bordered:active.shadow {
  box-shadow: none;
}
.essential__button.warning {
  background: var(--warning);
}
.essential__button.warning:hover {
  background: var(--text-warning);
  color: var(--text-color);
}
.essential__button.warning:active {
  background: var(--warning);
  box-shadow: none;
}
.essential__button.warning.bordered {
  background: transparent;
  border: 2px solid var(--warning);
  box-shadow: none;
}
.essential__button.warning.bordered:hover {
  background: var(--warning);
  border: 2px solid transparent;
}
.essential__button.warning.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--warning);
}
.essential__button.warning.bordered:active {
  background: var(--text-warning);
}
.essential__button.warning.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.warning.shadow {
  box-shadow: 0 0 1rem 0 var(--warning);
}
.essential__button.warning.shadow:hover {
  background: var(--text-warning);
  box-shadow: 0 4px 14px 0 var(--text-warning);
}
.essential__button.warning.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.warning.alter-bordered {
  background: var(--warning);
  color: var(--text-warning);
  box-shadow: none;
}
.essential__button.warning.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--warning);
  color: var(--warning);
}
.essential__button.warning.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--warning);
}
.essential__button.warning.alter-bordered:active {
  background: var(--text-warning);
}
.essential__button.warning.alter-bordered:active.shadow {
  box-shadow: none;
}
.essential__button.default {
  background: var(--default);
  color: var(--background);
}
.essential__button.default:hover {
  background: var(--text-color);
  color: var(--text-color);
  background: transparent;
  color: var(--default);
}
.essential__button.default:active {
  background: var(--default);
  box-shadow: none;
  color: var(--background);
}
.essential__button.default.bordered {
  background: transparent;
  border: 2px solid var(--default);
  box-shadow: none;
}
.essential__button.default.bordered:hover {
  background: var(--default);
  border: 2px solid transparent;
}
.essential__button.default.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--default);
}
.essential__button.default.bordered:active {
  background: var(--text-color);
}
.essential__button.default.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.default.shadow {
  box-shadow: 0 0 1rem 0 var(--default);
}
.essential__button.default.shadow:hover {
  background: var(--text-color);
  box-shadow: 0 4px 14px 0 var(--text-color);
}
.essential__button.default.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.default.alter-bordered {
  background: var(--default);
  color: var(--text-color);
  box-shadow: none;
  color: var(--background);
}
.essential__button.default.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--default);
  color: var(--default);
}
.essential__button.default.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--default);
}
.essential__button.default.alter-bordered:active {
  background: var(--text-color);
  color: var(--background);
}
.essential__button.default.alter-bordered:active.shadow {
  box-shadow: none;
}
.essential__button.accent {
  background: var(--accent);
}
.essential__button.accent:hover {
  background: var(--text-color);
  color: var(--text-color);
}
.essential__button.accent:active {
  background: var(--accent);
  box-shadow: none;
}
.essential__button.accent.bordered {
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: none;
}
.essential__button.accent.bordered:hover {
  background: var(--accent);
  border: 2px solid transparent;
}
.essential__button.accent.bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--accent);
}
.essential__button.accent.bordered:active {
  background: var(--text-color);
}
.essential__button.accent.bordered:active.shadow {
  box-shadow: none;
}
.essential__button.accent.shadow {
  box-shadow: 0 0 1rem 0 var(--accent);
}
.essential__button.accent.shadow:hover {
  background: var(--text-color);
  box-shadow: 0 4px 14px 0 var(--text-color);
}
.essential__button.accent.shadow:active {
  box-shadow: none;
  color: var(--text-color);
}
.essential__button.accent.alter-bordered {
  background: var(--accent);
  color: var(--text-color);
  box-shadow: none;
}
.essential__button.accent.alter-bordered:hover {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}
.essential__button.accent.alter-bordered:hover.shadow {
  box-shadow: 0 4px 14px 0 var(--accent);
}
.essential__button.accent.alter-bordered:active {
  background: var(--text-color);
}
.essential__button.accent.alter-bordered:active.shadow {
  box-shadow: none;
}


/*# sourceMappingURL=buttons.css.map*/