/*
 * Files in the colours people know them by: Word blue, Excel green, PowerPoint orange, Acrobat red… so one look tells
 * a .doc from a .pdf. Outside the brand's palette on purpose (its tokens have no such colours), and so the one place
 * with colours of its own: each is set for both themes (tests/web/styles.test.js holds it to that). FileKind gives
 * the type (data-kind) to an icon and to the extension's tag.
 */

:root {
  --file-excel: #0F7A3F;
  --file-word: #185ABD;
  --file-pdf: #C5221F;
  --file-powerpoint: #B04E00;
  --file-image: #0B7280;
  --file-video: #A3166E;
  --file-audio: #5B4BC4;
  --file-archive: #806500;
  --file-mail: #52606D;
  --file-text: #5F6368;
}

.dark,
[data-theme="dark"] {
  --file-excel: #4CC38A;
  --file-word: #6EA8FE;
  --file-pdf: #FF6B6B;
  --file-powerpoint: #F2994A;
  --file-image: #3CC6D6;
  --file-video: #F062B8;
  --file-audio: #A99CFF;
  --file-archive: #E0C04A;
  --file-mail: #9FB3C8;
  --file-text: #AEB4BA;
}

[data-kind] { --file-kind: var(--ealyx-color-ui-muted-foreground); }
[data-kind="excel"] { --file-kind: var(--file-excel); }
[data-kind="word"] { --file-kind: var(--file-word); }
[data-kind="pdf"] { --file-kind: var(--file-pdf); }
[data-kind="powerpoint"] { --file-kind: var(--file-powerpoint); }
[data-kind="image"] { --file-kind: var(--file-image); }
[data-kind="video"] { --file-kind: var(--file-video); }
[data-kind="audio"] { --file-kind: var(--file-audio); }
[data-kind="archive"] { --file-kind: var(--file-archive); }
[data-kind="mail"] { --file-kind: var(--file-mail); }
[data-kind="text"] { --file-kind: var(--file-text); }

.documents li > .icon[data-kind] { color: var(--file-kind); }
/* the extension as a solid tag, in the card's colour on its type's: white on light, dark on dark */
.file-kind { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: var(--ealyx-radius-xs); background: var(--file-kind); color: var(--ealyx-color-ui-card); font-size: var(--ealyx-typography-ui-label-font-size); font-weight: 700; line-height: 16px; letter-spacing: 0.02em; vertical-align: 1px; }