/*
 * Shared MEVOYA theme components.
 * Theme token values are generated by App\Enums\ThemeEnum in Blade.
 */

.mevoya-theme-picker {
  position: relative;
  z-index: 30;
}

.mevoya-theme-picker__trigger {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(37, 36, 34, 0.03);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  gap: 0.45rem;
  min-height: 38px;
  padding-block: 0.45rem;
  padding-inline: 0.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.mevoya-theme-picker__trigger:hover,
.mevoya-theme-picker__trigger:focus-visible {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent);
  color: var(--color-text);
  outline: 0;
}

.mevoya-theme-picker__trigger i {
  color: var(--color-brand-strong);
  font-size: 1.05rem;
}

.mevoya-theme-picker__current {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.mevoya-theme-picker__popover {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow-dropdown);
  inline-size: min(22rem, calc(100vw - 2rem));
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  opacity: 0;
  padding: 0.8rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  visibility: hidden;
}

[dir="ltr"] .mevoya-theme-picker__popover {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.mevoya-theme-picker.is-open .mevoya-theme-picker__popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.mevoya-theme-picker__groups {
  display: grid;
  gap: 0.85rem;
}

.mevoya-theme-picker__group {
  display: grid;
  gap: 0.55rem;
}

.mevoya-theme-picker__group-title {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 0.74rem;
  font-weight: 900;
  justify-content: space-between;
  letter-spacing: 0.01em;
  padding-inline: 0.15rem;
}

.mevoya-theme-picker__group-title span:last-child {
  align-items: center;
  background: var(--color-brand-soft);
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border));
  border-radius: 999px;
  color: var(--color-brand-strong);
  display: inline-flex;
  font-size: 0.68rem;
  height: 1.25rem;
  justify-content: center;
  min-width: 1.25rem;
  padding-inline: 0.35rem;
}

.mevoya-theme-picker__grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mevoya-theme-picker__option {
  align-items: center;
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.42rem;
  justify-items: center;
  min-block-size: 5.25rem;
  padding: 0.55rem 0.45rem;
  position: relative;
  text-align: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mevoya-theme-picker__option[data-theme-mode="dark"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--swatch-surface) 90%, white 10%), var(--swatch-surface));
  color: #fff;
}

.mevoya-theme-picker__option:hover,
.mevoya-theme-picker__option:focus-visible {
  background: var(--color-brand-soft);
  border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 16%, transparent);
  outline: 0;
  transform: translateY(-1px);
}

.mevoya-theme-picker__option[aria-selected="true"] {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.mevoya-theme-picker__swatch {
  border: 1px solid color-mix(in srgb, var(--swatch-brand) 32%, white 68%);
  border-radius: 999px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--swatch-sidebar) 24%, transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  inline-size: 2.2rem;
  min-block-size: 2.2rem;
  overflow: hidden;
}

.mevoya-theme-picker__swatch span:first-child {
  background: var(--swatch-sidebar);
}

.mevoya-theme-picker__swatch span:last-child {
  background: linear-gradient(135deg, var(--swatch-surface), var(--swatch-brand));
}

.mevoya-theme-picker__name {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.mevoya-theme-picker__option[data-theme-mode="dark"] .mevoya-theme-picker__name {
  color: color-mix(in srgb, var(--swatch-surface) 10%, white 90%);
}

.mevoya-theme-picker__check {
  align-items: center;
  background: var(--color-brand);
  border-radius: 999px;
  color: var(--color-on-brand);
  display: inline-flex;
  font-size: 0.8rem;
  inset-block-start: 0.35rem;
  inset-inline-end: 0.35rem;
  justify-content: center;
  min-block-size: 1.15rem;
  opacity: 0;
  position: absolute;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.18s ease;
  inline-size: 1.15rem;
}

.mevoya-theme-picker__option[aria-selected="true"] .mevoya-theme-picker__check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 575.98px) {
  .mevoya-theme-picker__current {
    display: none;
  }

  .mevoya-theme-picker__popover {
    position: fixed;
    inset-block-start: 4.5rem;
    inset-inline: 1rem;
    inline-size: auto;
  }
}