/* Privacy Settings
 * Toggle list for per-group privacy controls.
 */

@layer components {
  .privacy-settings {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-block: var(--block-space-l);
  }

  .privacy-settings__item {
    padding-block-end: var(--block-space);
    border-block-end: 1px solid var(--color-border);
  }

  .privacy-settings__toggle {
    display: flex;
    align-items: center;
    gap: var(--inline-space);

    & input[type="checkbox"] {
      width: 1.25rem;
      height: 1.25rem;
      cursor: pointer;
    }

    & label {
      display: inline;
      margin: 0;
      font-weight: 600;
      cursor: pointer;
    }
  }

  .privacy-settings__description {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin-block-start: 0.25rem;
    margin-block-end: 0;
    padding-inline-start: calc(1.25rem + var(--inline-space));
  }
}