/*
 * Profile pictures (Avatar, app/views/avatars): a drawing on a round
 * background in a theme colour (avatar-color-*), so it follows Ameixa/Vinho
 * and light/dark. The drawings' own colours are fixed, like a sticker.
 */
.app {
  .avatar.picture { padding: 0; overflow: hidden; background: var(--avc); }
  .avatar.picture svg { width: 100%; height: 100%; display: block; }
  .avatar-color-accent { --avc: var(--accent); }
  .avatar-color-second { --avc: var(--second); }
  .avatar-color-fourth { --avc: var(--fourth); }
  .avatar-color-fifth { --avc: var(--fifth); }
  .avatar-color-sixth { --avc: var(--sixth); }
  .avatar-color-ribbon { --avc: var(--ribbon); }

  .avatar-drawing {
    .av-w { fill: #FFFFFF; }
    .av-cream { fill: #FFF1DA; }
    .av-k { fill: #2B2B33; }
    .av-gray { fill: #A9AFBA; }
    .av-brown { fill: #B0743F; }
    .av-brown-d { fill: #7A4A28; }
    .av-tan { fill: #E8B57C; }
    .av-orange { fill: #F28A3B; }
    .av-y { fill: #F6C744; }
    .av-red { fill: #E5484D; }
    .av-red-d { fill: #B8343A; }
    .av-pink { fill: #F59CB2; }
    .av-green { fill: #4CB06F; }
    .av-green-d { fill: #2F7D50; }
    .av-blue { fill: #4A90E2; }
    .av-sky { fill: #A9DCF3; }
    .av-purple { fill: #8E6BD8; }
    .faint { opacity: .55; }
    .av-line { fill: none; stroke: #2B2B33; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .av-line.thin { stroke-width: 2; }
    .av-line.thick { stroke-width: 7; }
    .av-line.dashed { stroke-dasharray: 4 5; stroke: #FFFFFF; }
    .av-line.white { stroke: #FFFFFF; }
    .av-line.red { stroke: #E5484D; stroke-width: 7; }
    .av-line.yellow { stroke: #F6C744; }
    .av-line.green { stroke: #2F7D50; stroke-width: 4; }
    .av-line.blue { stroke: #4A90E2; }
    .av-line.brown { stroke: #7A4A28; stroke-width: 2.5; }
    .av-line.red.thick, .av-line.yellow.thick, .av-line.blue.thick { stroke-width: 8; }
  }

  /* The picker in Settings: the colour choice recolours every tile (CSS
     :has, no script). */
  .avatar-status:empty { display: none; }
  .avatar-picker { display: grid; gap: 16px; }
  .avatar-picker fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .avatar-picker legend { padding: 0; margin-bottom: 10px; }
  .avatar-picker .colors { display: flex; flex-wrap: wrap; gap: 8px; }
  .avatar-picker .color { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--avc); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
  .avatar-picker .color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .avatar-picker .color:has(input:checked) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
  .avatar-picker .color:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
  .avatar-picker .tile.avatar { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 50%; font-size: 22px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="accent"]:checked) .tile.picture { --avc: var(--accent); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="second"]:checked) .tile.picture { --avc: var(--second); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="fourth"]:checked) .tile.picture { --avc: var(--fourth); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="fifth"]:checked) .tile.picture { --avc: var(--fifth); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="sixth"]:checked) .tile.picture { --avc: var(--sixth); }
  .avatar-picker:has(input[name="user[avatar_color]"][value="ribbon"]:checked) .tile.picture { --avc: var(--ribbon); }
}