@layer components {
  .settings-index {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding-block-end: var(--block-space-double);
  }

  .settings-index__card {
    --panel-padding: 0;

    display: flex;
    flex-direction: column;
  }

  .settings-index__heading {
    border-block-end: 1px solid var(--color-ink-light);
    font-size: var(--text-medium);
    font-weight: 700;
    margin: 0;
    padding: var(--block-space) var(--inline-space-double);
    text-align: center;
    text-wrap: balance;
  }

  .settings-index__body {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space) var(--inline-space-double);
  }

  .abilities {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .abilities__item + .abilities__item {
    border-block-start: 1px solid var(--color-ink-light);
  }

  .abilities__link {
    align-items: center;
    color: inherit;
    display: flex;
    gap: var(--inline-space-double);
    padding: var(--block-space-half) var(--inline-space-double);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover .abilities__label {
        text-decoration: underline;
      }
    }
  }

  .abilities__glyph {
    --icon-size: 1rem;

    background-color: var(--color-selected-light);
    block-size: 2rem;
    border-radius: 50%;
    display: grid;
    flex: none;
    inline-size: 2rem;
    place-items: center;
  }

  .abilities__label {
    overflow-wrap: anywhere;
  }
}