/*
 * A FILENAME ON ONE LINE: the head gives way to its ellipsis, the tail — its extension and the letters before
 * it — never shrinks. No wider than its box, whatever the box aligns it to.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-filename {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
  }

  /* The head breaks anywhere and shows its first line, so it asks its box for no more than a letter and a
     narrow line cuts it with its ellipsis; the tail keeps to its line, over the words' own wrapping. */
  .lotics-filename__head {
    flex: 0 1 auto;
    min-width: 0;
  }

  .lotics-filename > .lotics-filename__tail {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* The name whole, for a reader who hears it: the split is the eye's. */
  .lotics-filename__spoken {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}