/* public/app/css/theme-picker.css
 * Synopsis: Module theme-picker.
 * Objectif: Rôle de public/app/css/theme-picker.css.
 */

.theme-pick {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .65rem;
  margin-left: auto;
}

.theme-pick__label {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.theme-pick button {
  border: 3px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: pointer;
  height: 2.35rem;
  padding: 0;
  width: 2.35rem;
}

.theme-pick button:hover {
  border-color: var(--ink);
  transform: scale(1.06);
}

.theme-pick button[aria-pressed="true"] {
  border-color: var(--ink);
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
  outline: none;
  transform: scale(1.1);
}

.theme-pick button[data-vok-theme="papier"] { background: #f2efdf; }
.theme-pick button[data-vok-theme="sable"] { background: #e8dcc8; }
.theme-pick button[data-vok-theme="ciel"] { background: #dce8f2; }
.theme-pick button[data-vok-theme="sauge"] { background: #dfe8df; }
.theme-pick button[data-vok-theme="noir"] { background: #2a2e38; }

@media (max-width: 760px) {
  .theme-pick { margin-left: 0; order: 3; width: 100%; }
  .theme-pick button { height: 2.1rem; width: 2.1rem; }
  .mast { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-pick button:hover,
  .theme-pick button[aria-pressed="true"] { transform: none; }
}