// Shared by the cards of the settings page (Git, automations, webhooks,
// import and export): the same padding and the same compact pill buttons as
// the rest of that page, whose own styles do not reach child components.
:host {
  display: block;
}

.ts-block {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.25rem;

  h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
  }

  > div > p,
  > div > h3 + p {
    margin: 0.25rem 0 0;
  }
}

.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  padding: 0 0.875rem;
  border: 1px solid var(--ts-line-strong);
  border-radius: 999px;
  background: var(--ts-surface);
  color: var(--ts-ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;

  &:hover:not(:disabled) {
    border-color: var(--ts-brand);
    color: var(--ts-ink);
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.ts-btn--primary {
  border-color: transparent;
  background: var(--ts-brand);
  color: #fff;

  &:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.08);
  }
}

.ts-btn--ghost {
  border-color: transparent;
  background: none;
}

.ts-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}