ContextSearch-web-ext CSS Styling

/* Requires ContextSearch-web-ext */
/* https://github.com/ssborbis/ContextSearch-web-ext */
/* Preferred - Copy to ContextSearch-web-ext, General Settings > Custom CSS */
/* 'OR' import contextsearchConfig.css in userContent.css - Works but doesn't style input search box */

:root {
  --border: var(--tab-selected-outline-color) !important; /* userChrome.css Color */
  --background: var(--toolbar-bgcolor) !important; /* userChrome.css Color */
  --tools-color: var(--lwt-text-color) !important; /* userChrome.css Color */
  --folder-color: transparent !important;
  --padding: 1px 0 1px 0 !important;
  --selected: rgba(255, 100, 244, 0.3) !important;
  --hover: var(--selected) !important;
  --separator: var(--selected) !important;
  color: var(--border) !important;
}

.container {
  padding: var(--padding);
}

GROUP {
  --group-color: var(--arrowpanel-background) !important; /* userChrome.css Color */
  padding: var(--padding);

  > LABEL {
      background-color: var(--group-color);
      text-transform: uppercase !important;
      font-family: "Arial", Helvetica, sans-serif !important;
      font-weight: bold;
      font-size: 8pt;
      color: var(--tools-color) !important;
      padding: var(--padding) !important;
  }
}

.tile {
  border: none !important;
  margin: 0px 0px 1px 0px !important;

  &:hover {
      border-radius: 4px !important;
      box-shadow: 0 0 0 1px var(--border), 0 1px 10px 2px var(--selected) !important;
  }

  &[data-type="separator"] {
      margin: 0px 0px 0px 0px !important;
      padding: 0px 0px 0px 0px !important;
      width: calc(100%) !important;
      height: 0px !important;
      border-bottom: 1px solid var(--border) !important;

      &:hover {
          height: 0px !important;
          border: 0px !important;
          border-bottom: 1px solid var(--border) !important;
      }
  }
}

#searchBar {
  font-size: 8pt !important;
  height: 25px !important;
  text-align: left !important;
  border: none !important;
  background-color: var(--toolbar-bgcolor) !important;
  outline: none !important;
  color: var(--tools-color) !important;

  &:focus,
  &:focus-within {
      border: none !important;
      background-color: var(--toolbar-bgcolor) !important;
  }
}

#searchBarContainer > .tool {
  font-size: 8pt !important;
  padding: 0px !important;
}

#suggestions {
  color: var(--tools-color) !important;
  font-size: 8pt !important;
  background-color: var(--arrowpanel-background) !important;
  border: none !important;
  text-align: left !important;

  > DIV {
      padding: 0 0 4px 1px !important;
      font-size: 8pt !important;
      height: 15px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;

      .tool {
          visibility: collapse !important;
      }
  }
}

.selectedFocus,
.selectedNoFocus {
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px var(--selected) !important;
  background-color: var(--selected) !important;
  color: var(--selected) !important;
}

.quickMenuMore[data-type="more"],
.quickMenuMore[data-type="less"] {
  border-radius: 0 !important;
}

/* Will not resolve userChrome.css variable assignments, ONLY from userContent.css */
#CS_quickMenuIframe,
.CS_quickMenuIframe {
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px rgba(255, 100, 244, 1), 0 1px 20px -5px rgba(255, 100, 244, 1) !important;
  opacity: 0.1 !important;

  &:hover {
      opacity: 0.9 !important;
      box-shadow: 0 0 0 1px var(--tab-selected-outline-color), 0 1px 20px -5px var(--tab-selected-outline-color) !important; /* userContent.css Color */
  }
}