/*
 * A column of plain action links (an objective's sidebar): bold, underlined,
 * in the browser's classic link blue so they read as links at a glance.
 */
@layer components {
  .action-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    padding: 0;

    & li + li {
      margin-block-start: 0;
    }

    & a {
      color: var(--color-link);
      font-weight: 600;
      text-decoration-line: underline;

      &:visited {
        color: var(--color-link-visited);
      }

      &:hover {
        color: var(--color-link);
        text-decoration-thickness: 2px;
      }
    }

    /*
     * Buttons in the list (a popover opener, a button_to, a label opening a
     * file picker) read as the same links. form.button_to raises the
     * specificity above the default
     * button_to look in buttons.css.
     */
    & :is(button, label, form.button_to button, form.button_to input[type="submit"]) {
      display: inline;
      min-block-size: auto;
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-link);
      font: inherit;
      font-weight: 600;
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
      cursor: pointer;

      &:hover {
        background: none;
        color: var(--color-link);
        text-decoration-thickness: 2px;
      }
    }

    & form.button_to {
      display: inline;
    }

    /* The base "several actions in a row" spacing does not apply to a column. */
    & a + a {
      margin: 0;
    }
  }

  /* A destructive action: the same link, in negative red. */
  .action-list .action-list__item--danger :is(a, button, form.button_to button, form.button_to input[type="submit"]) {
    color: var(--color-negative);

    &:hover,
    &:visited {
      color: var(--color-negative);
    }
  }
}