/* The paper sheet that stands for a file: on the card of a file Jet wrote, in the tray of files
   being attached, and on the chips of files already sent. */

/* A sheet of light paper. The ::before folds its top-right corner, the ::after draws two faint rules, and the tag is a band in the colour of the format. */
.file-sheet {
  position: relative; flex: none; width: 36px; height: 46px; overflow: hidden; border-radius: 3px; background: #e8edf1;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --file-colour: var(--muted);
}
.file-sheet[data-format="pdf"] { --file-colour: var(--file-pdf); }
.file-sheet[data-format="html"] { --file-colour: var(--file-html); }
.file-sheet[data-format="md"] { --file-colour: var(--file-md); }
.file-sheet[data-format="xlsx"] { --file-colour: var(--file-xlsx); }
.file-sheet[data-format="csv"] { --file-colour: var(--file-csv); }
.file-sheet[data-format="txt"] { --file-colour: var(--file-txt); }
.file-sheet[data-format="png"], .file-sheet[data-format="jpg"], .file-sheet[data-format="gif"], .file-sheet[data-format="webp"] { --file-colour: var(--file-image); }
.file-sheet::before {
  content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px;
  background: linear-gradient(225deg, transparent 50%, #b9c3cc 50%);
}
.file-sheet::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 16px; height: 9px;
  background: repeating-linear-gradient(to bottom, rgba(11, 20, 27, .16) 0 2px, transparent 2px 6px);
}
.file-tag {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--file-colour); color: var(--ground);
  font: 700 9px/14px var(--mono); text-align: center; letter-spacing: .02em;
}

/* The small sheet, for chips: the same sheet at two thirds of the size. */
.file-sheet.is-small { width: 24px; height: 30px; border-radius: 2px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.file-sheet.is-small::before { width: 7px; height: 7px; }
.file-sheet.is-small::after { left: 4px; right: 4px; top: 11px; height: 6px; background: repeating-linear-gradient(to bottom, rgba(11, 20, 27, .16) 0 1px, transparent 1px 3px); }
.file-sheet.is-small .file-tag { height: 10px; font-size: 7px; line-height: 10px; }