@import '../node_modules/@thisbeyond/solid-select/dist/esm/style.css';

#filter-bar {
    height: 35px;
}

.filter-bar {
    display: flex;
    flex-direction: row;

    & .solid-select-container {
        color: var(--text-primary);
    }

    & .solid-select-control {
        line-height: 26px;
        outline-color: var(--highlight-primary);
        border: var(--text-secondary) 1px solid;
    }

    & .solid-select-placeholder {
        color: var(--text-secondary);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .solid-select-option {
        color: var(--text-primary);

        &:hover {
            background-color: var(--primary-color-accent);
        }

        &[data-focused=true] {
            background-color: var(--highlight-primary);
        }
    }

    & .solid-select-list {
        background-color: var(--primary-color);
        border: var(--text-secondary) 1px solid;
    }

    & .solid-select-multi-value {
        padding-right: 0;
    }

    & .solid-select-multi-value-remove {
        margin-left: 5px;
    }

    & > div {
        display: inline-block;
        flex-grow: 0;
    }

    & > .mode {
        width: 150px;
        max-width: 20%;

        & .solid-select-control {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    & > .maps {
        width: 200px;
        max-width: 20%;

        & .solid-select-control {
            border-right: none;
            border-radius: 0;
        }
    }

    & > .players {
        flex-grow: 1;

        & .solid-select-control {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    & .reset {
        border-left: none;
        border-right: none;
        border-bottom: var(--text-secondary) 1px solid;
        border-top: var(--text-secondary) 1px solid;
        padding: 0 10px;
        outline: none;
        background: transparent;
    }
}

@media (max-width: 450px) {
    #filter-bar {
        height: 105px;
    }

    .filter-bar {
        flex-wrap: wrap;

        & > .maps, & > .mode {
            width: calc(100% - 30px);
            max-width: calc(100% - 30px);
        }

        & > .maps, & > .mode {
            .solid-select-control {
                border-bottom: none;
            }
        }

        & .reset {
            border-right: var(--text-secondary) 1px solid;
            border-bottom: none;
        }

        & .solid-select-control {
            border-radius: 0;
        }
    }
}