/* Chord Viewer Styles */

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

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

  --chords-font-size-tablet-s-coef: 0.7;    /* Default: 0.7 */
  --chords-font-size-mobile-l-coef: 0.6;    /* Default: 0.6 */
  --chords-font-size-mobile-m-coef: 0.5;    /* Default: 0.5 */
  --chords-font-size-mobile-s-coef: 0.4;    /* Default: 0.4 */

  --chords-font-size: 1.2em;                /* Default: 1.2em */
  --chords-line-height: 1.25em;             /* Default: 1.25em */
  --chords-line-margin: 0.6em;              /* Default: 0.6em */
  --chords-block-margin: 1.5em;             /* Default: 1.5em */
  --chords-line-width: 42em;                /* Default: 42em */
  --chords-max-width: 80%;                  /* Default: 80% */
  --chords-min-bar-width: 1em;              /* Default: 1em */

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

[data-chord-viewer="chords-container"] {
  font-size: calc(var(--chords-root-font-size) * var(--chords-font-size-coef));
}

[data-chord-viewer="dialog"], 
[data-chord-viewer="dialog"].light {
  --chords-bg-color: white;
  --chords-ui-color: #555;
  --chords-font-color: black;
  --chords-barline-color: #555;
}

[data-chord-viewer="dialog"].dark {
  --chords-bg-color: #181818;
  --chords-ui-color: #999;
  --chords-font-color: #e0e0e0;
  --chords-barline-color: #777;
}

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

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

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

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

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

[data-chord-viewer="container"] {
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-gutter: stable both-edges;
}

[data-chord-viewer="header"] {
  text-align: center;
}

[data-chord-viewer="title-container"] {
  font-size: inherit;
  width: calc(100dvw - calc(var(--chords-ui-button-width) * 2 + 1.5em * 2 + 1.2em));
  font-weight: bold;
  text-align: center;
  margin: 1.75em 0 1.5em;
}

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

[data-chord-viewer="body"] {
  margin: 0 1em;
  text-align: left;
}

.btn-cvw {
  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-cvw-action].btn-cvw {
  color: var(--chords-ui-color);
  border-radius: 50%;
  opacity: 0.9;
  z-index: 1;
}

[data-cvw-action="toggle-theme"],
[data-chord-viewer="x-container"] {
  top: 1.5em;
}

[data-cvw-action="toggle-theme"],
[data-cvw-action="toggle-bold-font"] {
  position: absolute;
  left: 1.5em;
}

[data-chord-viewer="x-container"] {
  position: fixed;
  right: 1.65em;
}

[data-cvw-action="toggle-bold-font"] {
  top: calc(50% - 0.89 * var(--chords-ui-button-width));
}

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

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

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

[data-cvw-action].btn-cvw {
  outline-offset: 0.38em;
}

[data-cvw-action].btn-x:is(:hover, :focus),
[data-cvw-action].btn-cvw:focus-visible {
  outline: 0.2em solid;
}

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

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

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

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

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

[data-chord-viewer="chords-container"] {
  margin: 0 auto;
  width: var(--chords-line-width);
  max-width: var(--chords-max-width);
}

[data-chords="body"],
[data-chord-viewer="header"],
[data-chords="subtitle-container"] {   
  margin-bottom: var(--chords-block-margin);
}

[data-chords="line"],
[data-chords="partno-container"] {
  margin-bottom: var(--chords-line-margin);
}

[data-chords="line"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--chords-min-bar-width), 1fr));
  container-type: inline-size;
  gap: 0;
}

[data-chords="chord"],
[data-chords="barline"],
[data-chords="partno"],
[data-chords="subtitle"] {
  font-size: var(--chords-font-size);
  line-height: var(--chords-line-height);
}

[data-chords="bar"] {
  grid-template-columns: auto repeat(2, 1fr) auto;
  overflow: clip;
}

[data-chords="bar-triple"] {
  grid-template-columns: auto repeat(3, 1fr) auto;
  overflow: clip;
}

[data-chords="bar"],
[data-chords="bar-triple"] {
  min-width: 0;
}

[data-chords="chord"] {
  white-space: nowrap;
  overflow: visible;
}

[data-chords="combo-barline"],
[data-chords="barline"],
[data-chords="volta"],
[data-chords="partno"] {
  color: var(--chords-barline-color);
}

[data-chords="volta"] {
  font-size: 90%;
}

[data-chords="combo-barline"] {
  padding: 0;
}

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

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

[data-chord-viewer="footer"] {
  width: 100%;
  position: fixed;
  padding: 0 1.65em 0 1.5em;
  box-sizing: border-box;
  bottom: 1.5em;
  left: 0;
  pointer-events: none;
}

[data-chord-viewer="footer"] [data-cvw-action].btn-cvw {
  pointer-events: auto;
}

.grid-center {
  display: grid;
  justify-items: center;
}

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

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

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

.wrapper-container {
  width: 100%;
}

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

  [data-chord-viewer="header"] {
    margin-bottom: 1.25em;
  }

  [data-cvw-action="toggle-theme"],
  [data-cvw-action="toggle-bold-font"] {
    left: 1.35em;
  }

  [data-chord-viewer="x-container"] {
    right: 1.3em;
  }

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

  [data-chord-viewer="slider"] {
    right: 1.2em;
  }

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

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

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

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

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

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

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

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

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

@supports (container-type: inline-size) {
  .wrapper-container {
    container-type: inline-size;
  }
}
	
@container (max-width: 36em) {
  .wrapper-container [data-chord-viewer="title"] {
    font-size: 4.9cqw;
  }
}