/* Categorisation rules: a list of pattern → category, and the editor behind it */
@layer components {
  .rules-bar {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-double);

    svg {
      block-size: var(--icon-md);
      color: var(--color-ink-medium);
      inline-size: var(--icon-md);
    }
  }

  .rules-bar__title {
    flex-grow: 1;
    font-size: var(--text-medium);
  }

  .rule-row {
    border-block-end: var(--border);
    color: var(--color-ink-medium);
    display: block;
    padding: var(--block-space-half) var(--inline-space-double);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-selected-light);
      }
    }
  }

  .rule-row__label {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    margin-block-start: var(--block-space-half);
  }

  .rule-row__value {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Editor
  /* ------------------------------------------------------------------------ */

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

  /* Not the shared .errors component — this is a bare list that stays empty
     most of the time, so it gets no box */
  .rule-form__errors p {
    color: var(--color-negative);
  }

  .rule-form__field {
    display: block;
    margin-block-end: var(--block-space);

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

  /* The matching-transaction preview runs to the edge, like the real list */
  .rule-form__matches {
    margin-inline-end: calc(var(--inline-space-double) * -1);

    > p {
      color: var(--color-ink-medium);
      font-size: var(--text-small);
      padding-block-end: var(--block-space-half);
    }
  }

  /* Carries .search-field, which draws the box and holds the glyph. This only
     stretches it to the row. */
  .rule-form__search {
    inline-size: 100%;
  }
}