@layer components {
  .workspace {
    --action-top: #b4eaf0;
    --action-middle: #96dce5;
    --action-bottom: #7dceda;
    --action-border: #559fad;
    --action-ink: #123b47;
  }

  .workspace .button,
  .workspace input[type=file]::file-selector-button {
    appearance: none;
    background: linear-gradient(180deg, var(--action-top), var(--action-middle) 48%, var(--action-bottom));
    color: var(--action-ink);
    border: 1px solid var(--action-border);
    border-radius: 6px;
    font-size: .87rem;
    font-weight: 600;
    text-shadow: 0 -1px 1px #00344230, 0 1px 0 #ffffffa6;
    box-shadow: inset 0 1px 0 #ffffff80, inset 0 -1px 0 #17445214,
      0 1px 2px #00182224, 0 3px 7px #00182212;
    transition: filter 140ms ease, box-shadow 140ms ease;
  }
  .workspace input[type=file]::file-selector-button {
    font-size: .85rem;
    padding: .35rem .5rem;
    margin-right: .5rem;
    cursor: pointer;
  }
  .workspace .button--secondary {
    --action-top: #f5fafc;
    --action-middle: #e3eef2;
    --action-bottom: #cfdee5;
    --action-border: #94aeba;
    --action-ink: #294650;
  }
  .workspace .button--danger {
    --action-top: #ffe8e9;
    --action-middle: #f5cdd1;
    --action-bottom: #e9b5bd;
    --action-border: #bb7f8a;
    --action-ink: #762b3a;
    text-shadow: 0 -1px 1px #62203220, 0 1px 0 #ffffffa6;
  }
  .workspace .button:hover,
  .workspace input[type=file]::file-selector-button:hover {
    filter: brightness(1.045);
    box-shadow: inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #17445214,
      0 2px 4px #00182226, 0 4px 10px #00182216;
  }
  .workspace .button:active,
  .workspace input[type=file]::file-selector-button:active {
    background: linear-gradient(180deg, var(--action-bottom), var(--action-middle) 65%, var(--action-top));
    box-shadow: inset 0 2px 4px #17445238, inset 0 -1px 0 #ffffff66;
    filter: none;
  }
  .workspace .button:focus-visible { outline-offset: 4px; }
  .workspace .button:disabled,
  .workspace input[type=file]:disabled::file-selector-button { opacity: .6; cursor: not-allowed; filter: grayscale(.5); }
  @media (prefers-reduced-motion: reduce) {
    .workspace .button, .workspace input[type=file]::file-selector-button { transition: none; }
  }
}

@layer components {
  .button { gap:.4rem; }
  .action-icon { flex:0 0 14px; vertical-align:-.1em; }
  .page-heading-icon { width:1em; height:1em; margin-right:.5em; vertical-align:-.1em; flex-shrink:0; opacity:.8; }
  .topbar-title { display:flex; align-items:center; }
}

@layer components {
  .workspace .button.filter-clear {
    padding: .45rem .6rem; font-size: .82rem; line-height: 1.35rem; align-self: start;
    background: transparent; color: var(--muted); border-color: var(--line);
    box-shadow: none; text-shadow: none; font-weight: 400;
  }
  .workspace .button.filter-clear:hover, .workspace .button.filter-clear:active {
    background: var(--canvas); color: var(--ink); box-shadow: none; filter: none;
  }
}