div#bookmark-list-container {
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #fff;
  color: $primary-color;

  // duckduckgo-specific styles
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid $duckduckgo-border-color;

  a {
    color: $primary-color;

    :hover {
      color: $link-color-dark;
      cursor: pointer;
    }
  }
  
  &.google { // google-specific styles
    width: 369px;
    box-sizing: border-box;
    box-shadow: none;

    h1 {
      font-size: 0.9em;
    }

    #navbar #ld-logo {
      width: 45%;
    }
  }

  &.brave { // brave-specific styles
    box-shadow: none;
    border: none;
    border-radius: 12px;
    font-size: 0.655rem;
    

    #navbar #ld-logo {
      flex: 1;
      
      img:not(.setup) {
        width: 35%;
      }
    }

    h1 {
        font-size: 0.8em !important;
    }
    #results_amount {
      flex: 1;
    }
  }

  &.searx { // searx-specific styles
    box-shadow: none;
  }
  
  &.kagi { // kagi-specific styles
    font-size: .875rem;
  }

  &.qwant { // qwant-specific styles
    box-shadow: none;
    border-radius: 12px;
    font-size: 14px;
    font-family: sans-serif;
  }

  .tags a:hover {
    text-decoration: none;
    cursor: default;
  }

  #error-message a,
  #error-message a:visited {
    color: $alternative-color !important;
    cursor: pointer;
  }

  ul > li {
    margin-top: 0.4rem;
  }

  #navbar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    #ld-logo {
      display: flex;
      align-items: center;
      font-size: 1.2rem;
      color: inherit;

      h1 {
        text-transform: uppercase;
        font-size: inherit;
        display: inline-block;
        margin: 0 0 0 8px;
      }
      img {
        width: 28px;
        height: 28px;
      }
    }

    #results_amount {
      span {
        color: $alternative-color-light-theme;
      }
    }
  }

  // --------- dark styling start ---------
  @mixin dark-styling {
    background-color: $duckduckgo-bg;
    border: none;
    color: $primary-color-dark;
    
    a {
      color: $primary-color-dark;
    }
    
    #navbar #results_amount span {
      color: $alternative-color !important;
    }
    
    .tags a {
      color: $alternative-color;
    }
    
    
    &.google:not(.light) {
      background-color: $google-bg;
      border: 1px solid $google-border-color-dark;
    }

    &.brave:not(.light) {
      background-color: $brave-bg;
    }

    &.searx:not(.light) {
      background-color: $searx-bg-dark;
      border: 1px solid $searx-border-color-dark;
    }
    
    &.kagi:not(.light) {
      background-color: $kagi-bg-dark;
      border: 1px solid $kagi-border-color-dark;
    }

    &.qwant:not(.light) {
      background-color: $qwant-bg-dark;
      border: 1px solid $qwant-border-color-dark;
    }
  }

  /**
  .dark-bg is the class duckduckgo globally uses for the dark theme
  data-dt=1 is the attribute of the body tag google uses for the dark theme
  .dark is the class brave search globally uses for the dark theme
  .theme-dark is the class searx globally uses for the dark theme
  .theme_dark is the class kagi globally uses for the dark theme
  
  .light is added if the manual white theme is set and disables these dark 
  styles, while .dark activates them regardless of global theme.
  */
  @media (prefers-color-scheme: dark) {
  &.dark,
  .dark-bg &:not(.light),                         // DuckDuckGo
  body[data-dt="1"] &:not(.light),                // Google
  :root:not(.light) body.is-pc &:not(.light),     // Brave Search
  html.theme-dark &:not(.light),                  // Searx
  html.theme_dark &:not(.light),                  // Kagi
  body[data-theme=dark] &:not(.light)             // Qwant
    {
      @include dark-styling;
    }
  }
  // --------- dark styling end ---------

}
