/* =====================================
   wide-frame-custom-colors.css
   Custom split colors for the shell frame
   Loaded after the base frame styles
   ===================================== */

:root{
  --va-frame-left-rgb: 156, 140, 255;
  --va-frame-right-rgb: 255, 102, 224;
}

html body[data-va-frame-colors-enabled="true"] .wof-root{
  --wof-color-left: rgb(var(--va-frame-left-rgb)) !important;
  --wof-color-right: rgb(var(--va-frame-right-rgb)) !important;
}

html body[data-va-frame-colors-enabled="true"] .wof-root .wof-frame.wof-left{
  color: var(--wof-color-left) !important;
}

html body[data-va-frame-colors-enabled="true"] .wof-root .wof-frame.wof-right{
  color: var(--wof-color-right) !important;
}

html body[data-va-frame-colors-enabled="true"] .frame-container .home-neon-frame.lavender,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-tcs .home-neon-frame.lavender,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-eisth .home-neon-frame.lavender{
  box-shadow:
    0 0 calc(12px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), 0.97),
    0 0 calc(26px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), 0.87),
    0 0 calc(51px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), 0.72) !important;
}

html body[data-va-frame-colors-enabled="true"] .frame-container .home-neon-frame.lavender::before,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-tcs .home-neon-frame.lavender::before,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-eisth .home-neon-frame.lavender::before{
  box-shadow:
    0 0 0 4.6px rgb(var(--va-frame-left-rgb)),
    inset 0 0 calc(7px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), calc(0.97 * var(--glow-alpha))),
    inset 0 0 calc(15px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), calc(0.72 * var(--glow-alpha))) !important;
  filter: drop-shadow(0 0 calc(7px * var(--glow-scale)) rgba(var(--va-frame-left-rgb), calc(0.87 * var(--glow-alpha)))) !important;
}

html body[data-va-frame-colors-enabled="true"] .frame-container .home-neon-frame.pink,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-tcs .home-neon-frame.pink,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-eisth .home-neon-frame.pink{
  box-shadow:
    0 0 calc(12px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), 0.97),
    0 0 calc(26px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), 0.87),
    0 0 calc(51px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), 0.72) !important;
}

html body[data-va-frame-colors-enabled="true"] .frame-container .home-neon-frame.pink::before,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-tcs .home-neon-frame.pink::before,
html body[data-va-frame-colors-enabled="true"] .frame-container.hover-eisth .home-neon-frame.pink::before{
  box-shadow:
    0 0 0 4.6px rgb(var(--va-frame-right-rgb)),
    inset 0 0 calc(7px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), calc(0.90 * var(--glow-alpha))),
    inset 0 0 calc(15px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), calc(0.60 * var(--glow-alpha))) !important;
  filter: drop-shadow(0 0 calc(7px * var(--glow-scale)) rgba(var(--va-frame-right-rgb), calc(0.80 * var(--glow-alpha)))) !important;
}