/* WORLD button component system: primary / secondary / ghost / danger */
:root {
  --world-button-radius: 999px;
  --world-button-height: 46px;
  --world-button-height-compact: 35px;
  --world-button-inline-padding: 22px;
  --world-button-ink: var(--world-shell-ink, #101a17);
  --world-button-accent: var(--world-shell-accent, #137861);
  --world-button-accent-deep: var(--world-shell-accent-deep, #0e604d);
  --world-button-accent-soft: var(--world-shell-accent-soft, #e7f0ed);
  --world-button-line: #c5ddd6;
  --world-button-danger: #a9483c;
  --world-button-danger-soft: #fff4f1;
  --world-button-danger-line: #ecc9c2;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--world-button-height);
  padding: 0 var(--world-button-inline-padding);
  border: 1px solid transparent;
  border-radius: var(--world-button-radius);
  color: var(--world-button-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .42;
  transform: none;
}
.button.primary {
  color: #fff;
  border-color: var(--world-button-accent);
  background: var(--world-button-accent);
}
.button.primary:hover:not(:disabled) {
  border-color: var(--world-button-accent-deep);
  background: var(--world-button-accent-deep);
}
.button.secondary {
  color: var(--world-button-accent-deep);
  border-color: var(--world-button-line);
  background: #fff;
}
.button.secondary:hover:not(:disabled) {
  border-color: #9fc8b8;
  background: var(--world-button-accent-soft);
}
.button.ghost {
  color: var(--world-button-accent-deep);
  border-color: transparent;
  background: transparent;
}
.button.ghost:hover:not(:disabled) {
  border-color: var(--world-button-line);
  background: var(--world-button-accent-soft);
}
.button.danger {
  color: var(--world-button-danger);
  border-color: var(--world-button-danger-line);
  background: var(--world-button-danger-soft);
}
.button.danger:hover:not(:disabled) {
  border-color: #e2ada4;
  background: #fce8e4;
}
.button.compact {
  min-height: var(--world-button-height-compact);
  padding: 0 15px;
  font-size: 11px;
}
.button.icon {
  width: var(--world-button-height-compact);
  min-width: var(--world-button-height-compact);
  padding: 0;
}