/* AN ACT ROW: the gap lines, then one line of buttons — the destructive verb at the start, the rest at the
   end with the primary last. A box too narrow for the row gives each button its own line, the primary
   first under the thumb. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-act-group {
    container: lotics-act-group / inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-act-group__gaps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-act-group__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-act-group__lead,
  .lotics-act-group__trail {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-act-group__trail {
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  /* Filling, each run takes its share and each button its share of the run. */
  .lotics-act-group[data-fill] .lotics-act-group__lead,
  .lotics-act-group[data-fill] .lotics-act-group__trail {
    flex: 1 1 0;
  }

  /* One button's box: it hugs its words, or takes its share of a filling run. */
  .lotics-act-group__act {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    border-radius: var(--lotics-radius-control);
    transition: box-shadow var(--lotics-duration-slow) var(--lotics-ease-standard);
  }

  .lotics-act-group[data-fill] .lotics-act-group__act {
    flex: 1 1 0;
  }

  /* Where a jump link landed: a ring in the accent round the act, fading once the link lets it go. */
  .lotics-act-group__act[data-landed] {
    box-shadow: 0 0 0 var(--lotics-ring-width) var(--lotics-accent);
  }

  @container lotics-act-group (width < 360px) {
    .lotics-act-group__row {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .lotics-act-group__lead {
      flex-direction: column-reverse;
      align-items: stretch;
    }

    .lotics-act-group__trail {
      flex-direction: column-reverse;
      align-items: stretch;
      margin-inline-start: 0;
    }
  }
}