/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

:root {
  --wogl-pill-radius: 999px;
  --wogl-pill-shell-padding: 4px;
  --wogl-pill-gap: 8px;
  --wogl-pill-compact-height: 32px;
  --wogl-pill-compact-padding: 12px;
  --wogl-pill-control-height: 40px;
  --wogl-pill-control-padding: 16px;
  --wogl-pill-action-height: 52px;
  --wogl-pill-action-padding: 24px;
  --wogl-pill-hairline: 1px;
  --wogl-pill-focus-width: 2px;
  --wogl-pill-focus-offset: 3px;
}

.language,
.lang-switch,
.experience-actions {
  padding: var(--wogl-pill-shell-padding);
  border-width: var(--wogl-pill-hairline);
  border-radius: var(--wogl-pill-radius);
}

.language button,
.lang-switch button,
.micro-button,
.status-pill,
.deck-progress,
.advanced-trigger,
.custom-chip,
.float-pill:not(.cc),
.pill,
.chip,
.perf-pill,
.channel-filter,
.shader-auto-eco,
.preview-action,
.channel-collection,
.logo-tools .mini-pill {
  min-height: var(--wogl-pill-compact-height);
  padding-block: 0;
  padding-inline: var(--wogl-pill-compact-padding);
  border-radius: var(--wogl-pill-radius);
}

.micro-button,
.status-pill,
.deck-progress,
.advanced-trigger,
.custom-chip,
.float-pill:not(.cc),
.pill,
.chip,
.perf-pill,
.channel-filter,
.shader-auto-eco,
.preview-action,
.channel-collection,
.logo-tools .mini-pill {
  border-width: var(--wogl-pill-hairline);
  border-style: solid;
}

.back-button,
.hub-key,
.advanced-option,
.advanced-reset,
.advanced-done,
.learning-pager button,
.learning-native:not(.is-practice) .learning-actions button,
.back-hub,
.dock-code-toggle,
.act,
.experience-actions button,
.deck-utility button {
  min-height: var(--wogl-pill-control-height);
  padding-block: 0;
  padding-inline: var(--wogl-pill-control-padding);
  border-radius: var(--wogl-pill-radius);
}

.back-button,
.advanced-option,
.advanced-reset,
.learning-pager button,
.learning-native:not(.is-practice) .learning-actions button,
.back-hub,
.dock-code-toggle,
.act.ghost {
  border-width: var(--wogl-pill-hairline);
  border-style: solid;
}

.oauth,
.primary,
.mix-button,
.jump-button,
.context-lost button,
.fallback button {
  min-height: var(--wogl-pill-action-height);
  padding-block: 0;
  padding-inline: var(--wogl-pill-action-padding);
  border-radius: var(--wogl-pill-radius);
}

.oauth,
.mix-button {
  border-width: var(--wogl-pill-hairline);
  border-style: solid;
}

.primary,
.jump-button,
.advanced-done,
.hub-key,
.act.primary,
.shader-lab-button.primary,
.context-lost button,
.fallback button {
  border: 0;
}

.interaction-hint {
  min-height: var(--wogl-pill-compact-height);
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  padding-inline: var(--wogl-pill-compact-padding);
  border-radius: var(--wogl-pill-radius);
}

.pill.on {
  box-shadow: 0 0 22px -8px currentColor;
}

.language button:focus-visible,
.lang-switch button:focus-visible,
.micro-button:focus-visible,
.deck-progress:focus-visible,
.advanced-trigger:focus-visible,
.custom-chip:focus-visible,
.advanced-option:focus-visible,
.back-button:focus-visible,
.hub-key:focus-visible,
.learning-pager button:focus-visible,
.learning-native:not(.is-practice) .learning-actions button:focus-visible,
.float-pill:focus-visible,
.pill:focus-visible,
.back-hub:focus-visible,
.chip:focus-visible,
.dock-code-toggle:focus-visible,
.act:focus-visible,
.experience-actions button:focus-visible,
.deck-utility button:focus-visible,
.channel-filter:focus-visible,
.shader-auto-eco:focus-visible,
.preview-action:focus-visible,
.channel-collection:focus-visible,
.logo-tools .mini-pill:focus-visible,
.oauth:focus-visible,
.primary:focus-visible,
.mix-button:focus-visible,
.jump-button:focus-visible {
  outline: var(--wogl-pill-focus-width) solid var(--wogl-pill-focus-color, var(--accent, var(--champagne, var(--pacc, var(--teal, var(--gold, #e8c89a))))));
  outline-offset: var(--wogl-pill-focus-offset);
}

@media (max-width: 800px) {
  :root {
    --wogl-pill-action-height: 48px;
    --wogl-pill-action-padding: 16px;
  }

  .experience-actions button,
  .deck-utility button {
    min-height: var(--wogl-pill-compact-height);
    padding-inline: 10px;
  }
}

@media (max-width: 560px) {
  .hub-key {
    min-height: var(--wogl-pill-compact-height);
    padding-inline: 10px;
  }
}

@media (max-width: 420px) {
  :root {
    --wogl-pill-compact-padding: 10px;
    --wogl-pill-control-padding: 12px;
    --wogl-pill-action-padding: 14px;
  }
}