/* One material treatment for private books, flat samples, and public books. */
:is([data-cover-style], [data-layout]) {
  --book-grain: url('/notebook-materials/linen.svg');
  --book-grain-size: 128px 128px;
  --book-grain-opacity: .66;
}
:is([data-cover-style=window], [data-layout=window]) {
  --book-grain: url('/notebook-materials/paper.svg');
  --book-grain-size: 180px 180px;
  --book-grain-opacity: .56;
}
:is([data-cover-style=gallery], [data-layout=gallery]) {
  --book-grain: url('/notebook-materials/leather.svg');
  --book-grain-size: 88px 88px;
  --book-grain-opacity: .45;
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover) {
  border: 0;
  padding-bottom: 25px;
  justify-content: flex-start;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(110deg, #ffffff08, transparent 48%, #0000000a), var(--cover-color);
  box-shadow: inset -1px 0 1px #0003, inset 0 1px 1px #fff3,
    inset 0 -1px 1px #0003, 2px 1px 0 #eeeae0, 3px 2px 0 #b5afa3,
    4px 3px 0 #f1eee5, 5px 4px 0 #bdb8ad, 7px 9px 13px #0003;
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover)::before,
.album-material-sample::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--book-grain) repeat;
  background-size: var(--book-grain-size);
  opacity: var(--book-grain-opacity);
  mix-blend-mode: soft-light;
}
/* The left joint catches light, then dips gently into the cover board. */
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover)[data-cover-style]::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 17px;
  height: auto;
  border: 0;
  border-radius: 2px 0 0 2px;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg, #0005, #ffffff18 20%, #ffffff08 43%,
    #00000009 55%, #0004 68%, #ffffff28 76%, transparent 100%);
  box-shadow: none;
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover)[data-cover-style=window]::after {
  background: linear-gradient(90deg, #0003, #fff1 22%, transparent 48%, #0002 68%, #fff3 77%, transparent);
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover)[data-cover-style=gallery]::after {
  background: linear-gradient(90deg, #0006, #fff2 23%, transparent 47%, #0004 66%, #ffffff25 75%, transparent);
}
:is(#album-tabs button.album-cover, .album-cover-preview)[aria-pressed=true] {
  box-shadow: inset -1px 0 1px #0003, inset 0 1px 1px #fff3,
    inset 0 -1px 1px #0003, 2px 1px 0 #eeeae0, 3px 2px 0 #b5afa3,
    4px 3px 0 #f1eee5, 5px 4px 0 #bdb8ad, 8px 13px 17px #0004;
}
.album-material-sample {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 80px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(135deg, #ffffff0a, transparent 60%), var(--cover-color);
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover) strong,
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover):has(.album-cover-caption:not([hidden])) strong {
  margin: auto 0 12px;
}
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover) strong[hidden] { display: none; }
:is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover) > strong[hidden] + :is(.album-cover-footer, .community-cover-footer) { margin-top: auto; }
.album-cover-imprint {
  position: absolute;
  left: 27px;
  right: 18px;
  bottom: 7px;
  display: block;
  font-size: 5.5px;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .5;
  pointer-events: none;
}
@media(max-width:600px) {
  :is(#album-tabs button.album-cover, .album-cover-preview, #community-albums .community-cover) { padding-bottom: 24px; }
  .album-cover-imprint { left: 24px; right: 15px; }
  .album-material-sample { height: 64px; }
}