/* Settings: an index of sections, and the per-section forms behind it */
@layer components {
  .settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  /* Section subheadings inside a settings form */
  .settings__group-heading {
    color: var(--color-ink-medium);
    font-size: var(--text-medium);
    margin-block-end: var(--block-space-half);
  }

  .settings__checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  /* The threshold field only appears once its parent toggle is checked */
  .settings__conditional {
    display: none;
    padding-block-start: var(--block-space-half);
  }

  .settings__group:has(.settings__trigger:checked) .settings__conditional {
    display: block;
  }

  .settings__hint {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }

  .settings__amount {
    align-items: center;
    color: var(--color-ink-medium);
    display: flex;
    gap: var(--inline-space-half);
  }

  /* Target allocation percentages stay narrow next to their labels */
  .col-percent {
    box-sizing: content-box;
    max-inline-size: 5ch;
  }

  /* Install instructions
  /* ------------------------------------------------------------------------ */

  .install-steps {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);

    ol {
      display: flex;
      flex-direction: column;
      gap: var(--block-space-half);
      list-style: disc;
      padding-inline-start: var(--inline-space-double);
    }

    /* The share glyph sits inline with the sentence it belongs to */
    .install-steps__inline {
      align-items: center;
      display: inline-flex;

      .icon {
        --icon-color: currentColor;
        --icon-size: var(--icon-lg);

        color: var(--color-link);
      }
    }
  }
}