@import url("base.css");
@import url("moviePoster.css");

.searchContainer {
    flex: 1;
    margin-right: 1rem;
}

.searchContainer input {
    width: 100%;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
}

.sortingFiltering {
    justify-content: space-between;
    gap: 1em;
}

.sortingFiltering > .dropdown > button {
    height: 3em;
    padding: 0 1em;
}

.dropdown-menu {
    background-color: var(--color-bg-alt-darker);
}

.dropdown-menu label {
    color: var(--color-text-light);
    cursor: pointer;
}

.dropdown-menu label:hover {
    color: var(--color-text);
    background-color: var(--color-bg-alt-lighter);
}

.dropdown-menu label:active {
    color: var(--color-text);
}

.dropdown-menu input {
    accent-color: var(--active);
}

.sortGroup > select {
    width: fit-content;
    border: none;
    color: var(--color-text-light);
    background-color: var(--color-bg-alt-lighter);
}