/* List Viewer Styles */

[data-list-viewer="dialog"] {
  --list-root-font-size: 16px;              /* Default: 16px */
  --list-font-size-coef: 1;                 /* Default: 1 */

  font-size: var(--list-root-font-size);

  --list-font-size-tablet-s-coef: 0.85;     /* Default: 0.85 */
  --list-font-size-mobile-l-coef: 0.75;     /* Default: 0.75 */
  --list-font-size-mobile-m-coef: 0.7;      /* Default: 0.70 */
  --list-font-size-mobile-s-coef: 0.65;     /* Default: 0.65 */

  --list-header-height: calc(6em * var(--list-font-size-coef));   /* Default base: 6em */
  --list-footer-height: calc(6em * var(--list-font-size-coef));   /* Default base: 6em */

  --tiles-font-size: 1.5em;                 /* Default: 1.5em */
  --tiles-height: 7em;                      /* Default: 7em */
  --tiles-padding: 0.25em;                  /* Default: 0.25em */
  
  --set-counter-font-size: 1em;             /* Default: 1em */
  --set-counter-offset: 2em;                /* Default: 2em */

  --list-ui-button-width: 2.75em;           /* Default: 2.75em */
  --list-ui-slider-width: 2.75em;           /* Default: 2.75em */
  --list-ui-slider-height: 12em;            /* Default: 12em */
}

[data-list-viewer="title-container"],
[data-list-viewer="tiles-container"],
[data-lvw-action="create-set"].btn-lvw,
[data-list-viewer="footer-status-container"] {
  font-size: calc(var(--list-root-font-size) * var(--list-font-size-coef));
}

[data-list-viewer="dialog"], 
[data-list-viewer="dialog"].light {
  --tiles-bg-color: white;
  --tiles-color-odd: #ccc;
  --tiles-color-odd-focused: #bebebe;
  --tiles-color-even: #f0f0f0;
  --tiles-color-even-focused: #ececec;
  --tiles-ui-color: #555;
  --tiles-font-color: #090909;
  --tiles-barline-color: #555;
  --set-counter-color: #663399;
  --set-counter-font-color: #fff;
}

[data-list-viewer="dialog"].dark {
  --tiles-bg-color: #161616;
  --tiles-color-odd: #181818;
  --tiles-color-odd-focused: #202020;
  --tiles-color-even: #303030;
  --tiles-color-even-focused: #353535;
  --tiles-ui-color: #999;
  --tiles-font-color: #e0e0e0;
  --tiles-barline-color: #777;
  --set-counter-color: #ffd324;
  --set-counter-font-color: #000;
}

@supports (selector(:has(*))) {

  body:has([data-list-viewer="dialog"].light:open) {
    background-color: white;
  }

  body:has([data-list-viewer="dialog"].dark:open) {
    background-color: #181818;
  }
}

[data-list-viewer="dialog"] {
  width: 100dvw;
  height: 100dvh;
  max-width: unset;
  max-height: unset;
  border: none;
  outline: none;
  padding: 0;
  background-image: none;
  background-color: var(--tiles-bg-color);
  color: var(--tiles-font-color);
  overflow: hidden;
}

[data-list-viewer="dialog"] * {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

[data-list-viewer="container"] {
  width: 100%;
  height: 100dvh;
  overflow-y: hidden;
}

[data-list-viewer="header"] {
  position: relative;
  width: 100%;
  height: var(--list-header-height);
  text-align: center;
  background-color: var(--tiles-bg-color);
  outline-offset: -0.18em;
  gap: 0.75em;
  padding: 0 1.65em 0 1.5em;
  z-index: 1;
}

[data-set-maker="on"] [data-list-viewer="header"],
[data-lvw-action="create-set"].btn-lvw {
  outline: 0.2em solid var(--set-counter-color);
}

[data-list-viewer="title-container"],
[data-list-viewer="footer-status-container"] {
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-align: center;
}

[data-list-viewer="title"],
[data-list-viewer="status"] {
  width: 100%;
}

[data-list-viewer="title"] {
  font-size: 1.75em;
}

[data-list-viewer="status"] {
  font-size: var(--tiles-font-size);
}


[data-set-maker="off"] [data-list-viewer="status"]::after {
  content: "Press on item to view";
}

[data-set-maker="on"] [data-list-viewer="status"]::after {
  content: "Select items for a Set";
}

.btn-lvw {
  font-size: inherit;
  appearance: none;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  text-align: center;
  outline-color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: color 0.25s ease-out;
}

[data-lvw-action].btn-lvw {
  color: var(--tiles-ui-color);
  outline-offset: 0.38em;
  border-radius: 50%;
  opacity: 0.9;
  z-index: 1;
}

[data-list-viewer="theme-btn-container"] {
  position: relative;
  width: var(--list-ui-button-width);
  height: var(--list-ui-button-width);
}

[data-list-viewer="footer"] [data-lvw-action].btn-lvw,
[data-lvw-action].btn-x {
  width: var(--list-ui-button-width);
  height: var(--list-ui-button-width);
  opacity: 0.75;
}

[data-lvw-action].btn-x {
  outline-offset: 0.25em;
}

[data-lvw-action].btn-x::after {
  font-size: var(--list-ui-button-width);
  content: "\00d7";
  padding-bottom: 0.1em;
}

[data-list-viewer="tune-tile"]:is(:focus-visible),
[data-lvw-action].btn-x:is(:hover, :focus),
[data-lvw-action].btn-lvw:is(:focus-visible) {
  outline: 0.2em solid;
}

[data-list-viewer="slider"]:is(:focus-visible) {
  outline: 0.15em dashed;
}

[data-list-viewer="slider"]:is(:focus-visible),
[data-lvw-action].btn-lvw:is(:hover, :focus, :focus-visible) {
  outline-color: var(--tiles-font-color);
}

[data-lvw-action].btn-lvw:is(:hover, :focus, :focus-visible) {
  color: var(--tiles-font-color);
  background-color: var(--tiles-bg-color-focused);
}

[data-list-viewer="slider"] {
  font-size: inherit;
  position: fixed;
  opacity: 0.4;
  height: 33%;
  max-height: var(--list-ui-slider-height);
  width: var(--list-ui-slider-width);
  top: 33%;
  left: 1.5em;
  writing-mode: vertical-lr;
  direction: rtl;
  transition: opacity 0.25s ease-out;
  accent-color: var(--tiles-ui-color);
  z-index: 1;
}

[data-list-viewer="slider"]:is(:hover, :focus, :focus-visible) {
  opacity: 0.9;
}

[data-lvw-ui="icon"] {
  width: inherit;
  height: inherit;
}

[data-lvw-ui="icon-fixed-size"] {
  width: calc(0.89 * var(--list-ui-button-width));
  aspect-ratio: 1 / 1;
}

[data-list-viewer="dialog"].dark [data-lvw-action].btn-lvw:is(:hover, :focus, :focus-visible) {
  opacity: 1;
}

[data-list-viewer="body"] {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--list-header-height) - var(--list-footer-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-list-viewer="tiles-container"] {
  flex-direction: column;
  width: 100%;
  max-width: 53.75em;
  margin: 0 auto;
  outline: none;
  padding: 0.1em 0;
  gap: 0.1em;
}

[data-list-viewer="tiles-listbox-outline"] {
  position: fixed;
  width: 100%;
  height: calc(100dvh - var(--list-header-height) - var(--list-footer-height));
  top: var(--list-header-height);
  left: 0;
  z-index: 1;
  pointer-events: none;
}

[data-list-viewer="tiles-container"]:focus-within + [data-list-viewer="tiles-listbox-outline"] {
  border-color: var(--tiles-font-color);
}

[data-set-maker="on"] [data-list-viewer="tiles-container"]:focus-within + [data-list-viewer="tiles-listbox-outline"] {
  border-color: var(--set-counter-color);
  border-top: none;
}

[data-list-viewer="tiles-container"],
[data-list-viewer="tune-tile"] {
  list-style-type: none;
  text-indent: 0;
}

[data-list-viewer="tune-tile"] {
  position: relative;
  cursor: pointer;
  width: 100%;
  color: var(--tiles-font-color);
  min-height: var(--tiles-height);
  padding: var(--tiles-padding);
  margin: 0;
  border-radius: 0;
  outline-offset: 0;
  outline-offset: -0.2em;
}

[data-list-viewer="tune-tile-title"] {
  font-size: var(--tiles-font-size);
}

[data-list-viewer="tune-tile"]:nth-of-type(odd) {
  background-color: var(--tiles-color-even);
}

[data-list-viewer="tune-tile"]:nth-of-type(odd):is(:hover, :focus, :focus-visible) {
  background-color: var(--tiles-color-even-focused);
}

[data-list-viewer="tune-tile"]:nth-of-type(even) {
  background-color: var(--tiles-color-odd);
}

[data-list-viewer="tune-tile"]:nth-of-type(even):is(:hover, :focus, :focus-visible) {
  background-color: var(--tiles-color-odd-focused);
}

[data-list-viewer="set-counter"] {
  position: absolute;
  top: calc(50% - var(--tiles-font-size) / 2);
  right: var(--set-counter-offset);
  width: calc(var(--tiles-font-size));
  aspect-ratio: 1 / 1;
  font-size: var(--set-counter-font-size);
  color: var(--set-counter-font-color);
  border-radius: 50%;
}

[data-list-viewer="set-counter"][data-lvw-counter] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--set-counter-color);
}

[data-list-viewer="set-counter"][data-lvw-counter]::after {
  content: attr(data-lvw-counter);
}

[data-list-viewer="footer"] {
  position: fixed;
  width: 100%;
  height: var(--list-footer-height);
  background-color: var(--tiles-bg-color);
  box-sizing: border-box;
  gap: 0.75em;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 0 1.65em 0 1.5em;
}

[data-list-viewer="footer"] [data-lvw-action="create-set"].btn-lvw {
  display: none;
  width: inherit;
  min-width: max-content;
  max-width: 16em;
  width: inherit;
  height: inherit;
  border-radius: 0;
  color: var(--tiles-font-color);
  outline-color: var(--set-counter-color);
  outline-offset: -0.3em;
  opacity: 0.95;
}

[data-list-viewer="footer"][data-set-maker="ready"] [data-lvw-action="create-set"] {
  display: flex;
}

[data-list-viewer="footer"][data-set-maker="ready"] [data-list-viewer="footer-status-container"] {
  display: none;
}

[data-lvw-action="create-set"] span {
  font-size: var(--tiles-font-size);
  font-weight: bold;
  padding: 0 0.5em;
}

[data-lvw-action="create-set"].btn-lvw:is(:hover, :focus, :focus-visible) {
  background-color: var(--tiles-color-odd-focused);
  color: var(--set-counter-color);
  outline-color: var(--set-counter-color);
  opacity: 1;
}

.flex-center:not([hidden]) {
  display: flex;
  justify-content: center;
}

.flex-between:not([hidden]) {
  display: flex;
  justify-content: space-between;
}

.flex-center,
.flex-between {
  align-items: center;
}

/* Tablet screens (vw <= 1024px) */
@media screen and (max-width: 64em) {


  [data-list-viewer="header"] {
    padding: 0 1.3em 0 1.35em;
  }

  [data-list-viewer="footer"] {
    padding: 0 1.25em 0 1.25em;
  }

  [data-list-viewer="slider"] {
    left: 1.2em;
  }

  [data-list-viewer="slider"]:is(:focus-visible) {
    outline-width: 0.2em;
  }
}

/* Tablet screens S (vw <= 768px) */
@media screen and (max-width: 48em) {

  [data-list-viewer="dialog"] {
    --list-font-size-coef: var(--list-font-size-tablet-s-coef);
  }
}

/* Mobile screens L (vw <= 512px) */
@media screen and (max-width: 32em) {

  [data-list-viewer="dialog"] {
    --list-font-size-coef: var(--list-font-size-mobile-l-coef);
  }
}

/* Mobile screens M (vw <= 360px) */
@media screen and (max-width: 22.5em) {

  [data-list-viewer="dialog"] {
    --list-font-size-coef: var(--list-font-size-mobile-m-coef);
  }
}

/* Mobile screens S (vw <= 320px) */
@media screen and (max-width: 20em) {

  [data-list-viewer="dialog"] {
    --list-font-size-coef: var(--list-font-size-mobile-s-coef);
  }
}

@supports (-webkit-tap-highlight-color: rgba(0,0,0,0)) {
  .btn-lvw, 
  [data-list-viewer="tune-tile"] {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

@supports (container-type: inline-size) {
  [data-list-viewer="header"],
  [data-list-viewer="footer"] {
    container-type: inline-size;
  }
}
	
@container (max-width: 21em) {
  [data-list-viewer="header"] [data-list-viewer="title"],
  [data-list-viewer="footer"] [data-list-viewer="status"] {
    font-size: 6.25cqw;
  }
}

@container (max-width: 16em) {
  [data-list-viewer="footer"] [data-lvw-action="create-set"] span {
    font-size: 6.25cqw;
  }
}