.primary-button,
.secondary-button {
  min-height: var(--control-target-size);
  padding: 0 var(--space-standard);
  border-radius: var(--corner-radius-pill);
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-control);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--transition-duration-fast) var(--transition-timing-standard),
    transform var(--transition-duration-fast) var(--transition-timing-standard);
}

.primary-button[hidden],
.secondary-button[hidden] {
  display: none;
}

.primary-button {
  border: 1px solid var(--colour-green);
  background: var(--colour-green);
  color: var(--colour-surface);
}

.secondary-button {
  border: 1px solid var(--colour-green);
  background: transparent;
  color: var(--colour-green);
}

.secondary-button.danger-secondary-button {
  border-color: var(--colour-warning);
  color: var(--colour-warning);
}

.primary-button:hover,
.primary-button:focus-visible,
.secondary-button:hover,
.secondary-button:focus-visible {
  opacity: 0.9;
  text-decoration: none;
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled) {
  transform: translateY(1px);
}

.primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.tertiary-action {
  color: var(--colour-green);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.tertiary-action.danger-tertiary-action {
  color: var(--colour-warning);
}

.tertiary-action:hover,
.tertiary-action:focus-visible {
  text-decoration-thickness: 2px;
}

button.tertiary-action {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

button.tertiary-action:disabled {
  color: var(--colour-text-muted);
  cursor: default;
  text-decoration: none;
}

summary.tertiary-action {
  width: fit-content;
  cursor: pointer;
}

.action-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-standard);
}

.action-cluster > .tertiary-action {
  align-self: center;
}


.action-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.action-list > .tertiary-action {
  display: inline-flex;
  align-items: center;
}

@media (pointer: coarse) {
  .action-list > .tertiary-action {
    min-height: var(--control-target-size);
  }
}