/* searchable-select — Bootstrap 5 theme
   Standalone styles for the <searchable-select> Web Component.
   Requires Bootstrap 5 CSS to be loaded first. */

/* Wrapper */
searchable-select .ss-wrapper {
    position: relative;
}

/* Input */
searchable-select .ss-input {
    position: relative;
    z-index: 1;
}
searchable-select .ss-input:focus {
    box-shadow: none;
    border-color: var(--theme-focus-border, #86b7fe);
}
searchable-select .ss-wrapper:not(.open) .ss-input:focus {
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring, rgba(13, 110, 253, 0.25));
}
searchable-select .ss-wrapper.open .ss-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    border-color: var(--theme-focus-border, #86b7fe);
}

/* Dropdown menu: absolute positioning (no layout shift) */
searchable-select .ss-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}
searchable-select .ss-wrapper.open .ss-menu {
    border-color: var(--theme-focus-border, #86b7fe);
    border-top-color: transparent;
}

/* Unified focus ring: pseudo-element sized via CSS custom property
   --ss-ring-height, set by JS to input height + dropdown height. */
searchable-select .ss-wrapper.open::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ss-ring-height, 100%);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring, rgba(13, 110, 253, 0.25));
    pointer-events: none;
    z-index: 0;
}

/* Clear button */
searchable-select .ss-clear {
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 38px;
    display: flex;
    align-items: center;
    z-index: 2;
    background: none;
    border: none;
    padding: 0.25rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    font-size: 1rem;
}
searchable-select .ss-clear:hover {
    color: #343a40;
}

/* Highlighted item — keyboard or hover, but not both at once */
searchable-select .dropdown-item.ss-highlighted,
searchable-select:not(.ss-keyboard-nav) .dropdown-item:hover {
    background-color: #495057;
    color: #fff;
}
searchable-select .dropdown-item.active.ss-highlighted,
searchable-select:not(.ss-keyboard-nav) .dropdown-item.active:hover {
    background-color: var(--theme-primary-active, #0a58ca);
    color: #fff;
}

/* Pad input to avoid text under clear button */
searchable-select .ss-input.has-clear {
    padding-right: 2rem;
}