/* Search Anything Anywhere Form Styles */

/* Root custom properties for theme overrides */
:root {
  --search-anything-anywhere-text: #1a1a1a;
  --search-anything-anywhere-background: #fff;
  --search-anything-anywhere-highlight: #5897fb;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --search-anything-anywhere-text: #fff;
    --search-anything-anywhere-background: #1a1a1a;
  }
}

/* Main search form container */
.search-anything-anywhere-search-form {
  form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  input[type='search'] {
    flex: 0 1 200px;
    padding: 10px;
    font-size: inherit;
    color: var(--search-anything-anywhere-text, #1a1a1a);
    background-color: var(--search-anything-anywhere-background, #fff);
  }

  .select2-container {
    flex: 1 1 auto;
    min-width: 250px;

    .select2-selection.select2-selection--multiple {
      color: var(--search-anything-anywhere-text, #1a1a1a);
      background-color: var(--search-anything-anywhere-background, #fff);
      border: 1px solid #ccc;

      ul {
        li.select2-selection__choice {
          display: block;
          margin-top: 5px;

          .select2-selection__choice__display {
            color: #1a1a1a;
          }

          button.select2-selection__choice__remove {
            background-color: transparent;
            cursor: pointer;
            border-radius: initial;
          }
        }
      }
      .select2-search {
        .select2-search__field {
          margin-top: 10px;
          height: 30px;
          color: var(--search-anything-anywhere-text, #1a1a1a);
          background-color: var(--search-anything-anywhere-background, #fff);
        }
      }
    }
  }

  button {
    color: var(--search-anything-anywhere-text, #1a1a1a);
    background-color: var(--search-anything-anywhere-background, #fff);
    padding: 10px 20px;
    background-color: inherit;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
    font-size: inherit;

    &:hover {
      color: var(--search-anything-anywhere-background, #fff);
      background-color: var(--search-anything-anywhere-text, #1a1a1a);
    }
  }
}

/* Mobile/responsive styles */
@media (max-width: 600px) {
  .search-anything-anywhere-search-form {
    input[type='search'] {
      flex: 1 1 auto;
    }

    button {
      margin: auto;
      width: 100%;
      max-width: 150px;
    }

    .select2.select2-container {
      width: 100% !important;
    }
  }
}

.select2-container {
  &.select2-container--open {
    .select2-dropdown {
      border-radius: inherit;
      .select2-results {
        ul {
          li {
            color: var(--search-anything-anywhere-text, #1a1a1a);
            background-color: var(--search-anything-anywhere-background, #fff);

            &:hover,
            &.select2-results__option--selected {
              background-color: var(
                --search-anything-anywhere-highlight,
                #5897fb
              );
              color: #fff;
            }
          }
        }
      }

      &.select2-dropdown--above,
      &.select2-dropdown--below {
        border-color: var(--border-secondary);
      }
    }
  }
}