/* Light */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: var(--color-indigo-700);
  --primary-hover: var(--color-indigo-600);
  --primary-focus: color-mix(in oklab, var(--primary), transparent 80%);
  --primary-inverse: var(--color-slate-50);

  /* Custom */
  --muted: var(--color-slate-600);
  --body-bg: var(--color-slate-50);
  --raised-bg: white;
  --raised-shadow: 0 2px 30px 0 rgba(0 0 0 / .05);
}

/* Adjust light mode contrast for Tailwind */
:root[data-library="tailwind"] {
  --primary: var(--color-indigo-600);
  --primary-hover: var(--color-indigo-500);
  --primary-focus: color-mix(in oklab, var(--primary), transparent 80%);
  --muted: var(--color-slate-500);
}

/* Dark */
@media only screen and (prefers-color-scheme: dark) { 
  :root:not([data-theme]) {
    --primary: var(--color-indigo-500);
    --primary-hover: var(--color-indigo-600);
    --primary-focus: color-mix(in oklab, var(--primary), transparent 80%);
    --primary-inverse: var(--color-slate-950);

    /* Custom */
    --muted: var(--color-slate-400);
    --body-bg: var(--color-slate-950);
    --raised-bg: color-mix(in oklab, var(--color-slate-950), white 5%);
    --raised-shadow: none;
  }
}

body {
  background-color: var(--body-bg);
  transition: 500ms background-color ease;
}

body > main {
  color: var(--primary);
  padding-block-start: 2rem;
}

h1 {
  font-size: 48px;
  margin: 0;
}

h1 img {
  width: 14rem;
  margin-inline-end: .5rem;
}

header {
  text-align: center;
  font-size: .825rem;
  color: var(--muted);
  margin-block-end: 3rem;
}

header p {
  font-size: inherit;
  color: inherit;
  margin-block-start: -1.2rem;
  margin-inline-start: 4.8rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 0 !important;
}

.no-wrap {
  white-space: nowrap;
}

.actions {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-auto-rows: min-content;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-block: 2rem;
}

.actions label {
  grid-column: span 2;
  display: inline-block;
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
} 

.actions a[download] {
  font-size: inherit;
  white-space: nowrap;
}

.actions a[download] svg {
  margin-inline-start: .5rem;
  vertical-align: 0;
}

.actions select {
  width: 150px;
  font-size: inherit;
  margin-block-end: 0;
}

h2 {
  font-size: inherit;;
  text-align: left;
  color: var(--muted);
  margin: 0;
}

.palettes {
  background-color: var(--raised-bg);
  padding-inline: 1rem;
  padding-block: 2rem;
  margin-inline: -1rem;
  margin-block: 2rem;
}

.palette {
  display: grid;
  gap: .5rem .25rem;
  grid-template-columns: repeat(6, 1fr);
  margin-block-end: 2rem;
}

.palette:last-of-type {
  margin-block-end: 0;
}

.palette > :first-child {
  grid-column: span 6;
}

.swatch {
  font-size: .75rem;
  color: var(--muted);
}

.hex {
  font-size: .675rem;
}

.palette button {
  all: unset;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5;
  border-radius: .25rem;
  font-size: 0;
  color: transparent;
  outline-offset: 1px;
  cursor: pointer;
  margin-block-end: .125rem;
  transition: 125ms transform ease;
}

.palette button:hover {
  transform: scale(1.025);
  z-index: 1;
}


.palette button:active {
  transform: translateY(2px);
}

.palette button:focus-visible {
  outline: dashed 3px var(--primary);
}

html:not([data-library="tailwind"]) .tailwind-only,
html:not([data-library="harmony"]) .harmony-only {
  display: none;
}

footer p {
  font-size: .75rem;
  text-align: center;
  color: var(--muted);
  margin-block-end: .5rem;
}

footer p:last-child {
  margin-block-end: 0;
}

#feedback {
  position: fixed;
  top: 0;
  left: calc(50% - 7rem);
  width: 14rem;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  background: var(--primary);
  box-shadow: 0 2px .5rem 0 rgb(0 0 0 / .25);
  text-align: center;
  line-height: 2.25;
  color: var(--primary-inverse);
  opacity: 0;
  padding-inline: .5rem;
  padding-block: .25rem .75rem;
  transform-origin: top;
  transform: scale(.8) rotateX(90deg);
  pointer-events: none;
  transition: all .33s ease;
  z-index: 10;
}

#feedback code {
  background: rgb(0 0 0 / .125);
  color: var(--primary-inverse);
}

#feedback .preview {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  outline: solid 2px var(--body-bg);
  border-radius: .125rem;
  vertical-align: -.25em;
  margin-inline: .25rem;
}

#feedback.visible {
  opacity: 1;
  transform: scale(1) rotateX(0);
}

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
}

#overlay::after {
  content: '';
  position: absolute;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  border: solid .25rem #6366f1;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

@media only screen and (prefers-color-scheme: dark) { 
  #overlay {
    background-color: #020617;
  }
}

@media screen and (min-width: 576px) {
  .actions {
    grid-template-columns: min-content min-content min-content;
  }

  .actions label {
    grid-column: span 1;
  }

  .palettes {
    border-radius: 1rem;
    box-shadow: var(--raised-shadow);
    padding-inline: 2rem;
    padding-block: 2rem;
    margin-inline: 0;
  }
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 1rem;
  }

  .palettes {
    border: none;
    padding-inline: 3rem;
    padding-block: 3rem;
    margin-block: 2rem;
  }
}

@media screen and (min-width: 992px) {
  header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    text-align: start;
    margin-block-end: 2rem;
  }

  .meta p {
    margin-block-start: -1.2rem;
    margin-inline-start: 5.8rem;
  }

  .palette {
    grid-template-columns: repeat(12, 1fr);
  }

  .palette > :first-child {
    grid-column: span 1;
    line-height: 3;
  }
}