@use 'backend' as *;

// ACCOUNT PANEL
#{c(sidebar panel panels)} {
  background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.5));
  border-radius: 0;
  border: none;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 8px;
}

// ACTIVITY
:is(#{c(main themeLight)}, #{c(main themeDark)}) {
  #{c(sidebar panel activity panel)} {
    background-color: transparent;
  }
}

// BUTTONS
:is(#{c(main themeLight)}, #{c(main themeDark)}) {
  #{c(sidebar panel voice actionButtons button)} {
    &#{c(sidebar panel voice actionButtons color)} {
      background: cv('color.main');
      &:hover {
        background: cv('color.hover');
      }
      &#{c(sidebar panel voice actionButtons active)} {
        background: hsl(from cv('color.main') h s l/.4);
        color: var(--button-secondary-text);
        border-color: hsl(from cv('color.main') h s l/.2);
        &:hover {
          background: hsl(from cv('color.hover') h s l/.3);
        }
      }
    }
  }
}


// NOISE CANCELLATION
#{c(sidebar panel voice noiseCancellation popout)} {
  background: cv('shading.popout');
}

// QUEST
:is(#{c(main themeLight)}, #{c(main themeDark)}) {
  #{c(sidebar panel quest wrapper)} {
    background: transparent;
  }
}
#{c(sidebar panel quest contentWrapper)} {
  background: none !important;
}
#{c(sidebar panel quest postEnrollmentCollapsed)},
#{c(sidebar panel quest postEnrollmentExpanded)} {
  background-image: none !important;
  background-color: transparent;
  border: none;
}
#{c(sidebar panel quest headerText)},
#{c(sidebar panel quest submenuIcon)} {
  color: transparent; // hide when collapsed
}
#{c(sidebar panel quest contentInteractable)} {
  #{c(sidebar panel quest postEnrollmentExpanded)} {
    background-color: cv('shading.popout');
  }
  #{c(sidebar panel quest headerText)} {
    color: cv('text.normal')
  }
  #{c(sidebar panel quest submenuIcon)} {
    color: var(--interactive-normal);
  }
}
