@use "../../../../styles/utils" as *;

.search {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
    font-size: var(--c--globals--font--sizes--sm);
}

.search__container {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    background-color: var(--c--contextuals--background--surface--tertiary);
    border-radius: 4px;
    border: 1px solid var(--c--contextuals--border--semantic--neutral--tertiary);
    padding-right: var(--c--globals--spacings--4xs);
    z-index: 2;
}

.search__input-container {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.search__container:has(.search__input-container:focus-within) {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;

    .search__input {
        outline: none;
    }
}

.search__label {
    padding-left: var(--c--globals--spacings--xs);
    display: grid;
    place-items: center;
    cursor: text;
}

.search__input {
    appearance: none;
    border: none;
    background-color: transparent;
    padding: var(--c--globals--spacings--xs);
    flex: 1;
    width: 100%;
    height: 100%;
    font-weight: 500;
    color: inherit;

    // Hide the clear button
    &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }
}

@media screen and (max-width: breakpoint(tablet)) {
    .search{
        max-width: 100%;
    }
}
