@import url('var.css');

/* UNIVERSAL STYLING */
.sidebar {
    background-color: var(--mainAccentColor);
    color: var(--mainTextColor);
    padding: 1em;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2em;

        h1 {
            font-size: clamp(1rem, 2vw, 2rem);
        }

        svg {
            height: 2em;
            width: 2em;
            background-color: var(--mainTextColor);
        }
    }

    form {
        align-self: center;
        justify-self: center;
        display: flex;
        flex-direction: column;
        max-width: fit-content;
        gap: 0.5em;

        input,
        select {
            border: none;
            padding: 0;
            margin: 0;
            height: 2em;
            width: 100%;
            border-radius: 1em;
            font-size: 1em;
            color: black;
            text-align: center;
            justify-content: center;
            background-color: #90a0c5;
        }

        svg {
            background-color: black;
            width: 2em;
            height: 2em;
        }

        #reset-filter-icon {
            mask: url(../svg/filter_alt_off.svg) no-repeat center;
        }
        #search-icon {
            mask: url(../svg/search_3.svg) no-repeat center;
        }


        .control {
            display: flex;
            flex-direction: row;
            gap: 1em;
            justify-content: space-evenly;

            button {
                display: flex;
                justify-content: center;
                place-items: center;
                height: 3em;
                width: 4em;
                border: 2px solid var(--lighterBlue);
                border-radius: 1.5em;
                box-shadow: var(--mainShadow);
            }
        }
    }
}

/* DESKTOP STYLING */
@media screen and (min-width: 720px) {
    .sidebar {
        max-width: min-content;
        max-height: fit-content;
        position: sticky;
        top: 4em;
    }
}