@use "../VerticalMenu.module.scss" as VerticalMenu;

.container {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-grow: 0.25;
}

.input {
    border-radius: 6px;
    padding-right: 32px; // space for loading spinner
    padding-left: 28px; // space for search icon
    padding-top: 8px;
    padding-bottom: 8px;

    text-overflow: ellipsis;

    width: 100%;

    &:focus,
    &.isOpen {
        outline: none;
    }

    &.isOpen {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.icon,
.loadingIcon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);

    width: 14px;
    height: 14px;

    color: var(--g1000);

    pointer-events: none;
}

.loadingIcon {
    left: unset;
    right: 10px;

    color: inherit;
}

.container:focus-within .icon {
    color: var(--g900);
}

.results {
    list-style: none;
    transform-origin: center top;

    border-top: 0;
    border-color: var(--g600);

    border-top-left-radius: 0;
    border-top-right-radius: 0;

    opacity: 0;
    transform: scaleY(0.75);
    visibility: hidden;
    transition-duration: 0.125s;
    transition-property: opacity, transform, visibility;
}

.results.isOpen {
    opacity: 0.9999;
    transform: none;
    visibility: visible;
}

.item {
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
}

.itemName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scratchOwnerAvatar {
    flex-shrink: 0;
    border-radius: 999px;
    width: 16px;
    height: 16px;
}

.noResults {
    color: var(--g1000);
}
