/*toggle-switch*/

input:where([type="checkbox"][role="switch"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    input:where([type="checkbox"][role="switch"]) + label {
        box-sizing: border-box;
        display: inline-block;
        width: 2rem;
        height: 1rem;
        border-radius: 1rem;
        padding: 2px;
        background-color: #c0ceda;
        transition: all 0.5s;
        cursor: pointer;
    }

        input:where([type="checkbox"][role="switch"]) + label::before {
            box-sizing: border-box;
            display: block;
            content: "";
            height: calc(1rem - 4px);
            width: calc(1rem - 4px);
            border-radius: 50%;
            background-color: #fff;
            transition: all 0.5s;
        }

    input:where([type="checkbox"][role="switch"]):checked + label {
        background-color: var(--main-color-1);
    }

        input:where([type="checkbox"][role="switch"]):checked + label::before {
            margin-left: 1rem;
        }

.checkbox-container {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.toggle-switch-label {
    margin-right: 5px;
}

/*radio-group*/

input:where([type="radio"][role="switch"]),
input:where([type="checkbox"][role="select"]) {
    display: none;
}

    input:where([type="radio"][role="switch"]) + label,
    input:where([type="checkbox"][role="select"]) + label {
        padding: 0.4rem 0.7rem;
        border: 1.5px dashed var(--gray-medium);
        border-radius: 1rem;
    }

    input:where([type="radio"][role="switch"]):checked + label,
    input:where([type="checkbox"][role="select"]):checked + label {
        border: 2px solid var(--main-color-1);
    }

/*
    https://alvaromontoro.com/blog/68017/creating-a-css-only-toggle-switch
    <input type="checkbox" role="switch" />
*/


.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgba(175,174,178,1)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 8px;
    border: 1px solid #dfdfdf;
    border-radius: 20px;
    padding: 10px;
    padding-right: 2rem;
    border: 1.5px solid var(--gray-medium);
    font-weight: bold;
    font-size: 14px;
    color: var(--gray-medium);
    font-family: 'Gilroy', sans-serif;
    margin: 4px;
}

    .select::before {
        font-family: "Font Awesome Kit";
        font-weight: 900;
        content: "\f007";
    }

.searchbox {
    font-size: 0.8rem;
    width: 100%;
    padding: .7em;
    padding-inline: 1.2em;
    border: none;
    background-color: var(--bg-light);
    border-radius: 1.2em;
    margin: .4em;
}

    .searchbox::placeholder {
        width: 100%;
        font-size: 0.8rem;
        padding: 0;
        font-weight: normal;
        color: gray;
    }

    .searchbox:focus {
        border: 1px solid var(--main-color-1);
        outline: none;
    }

@media (min-width: 800px) {
    .searchbox {
        min-width: 8rem;
    }
}

.autocomplete {
    position: relative;
}

    .autocomplete .options {
        position: absolute;
        top: 40px;
        left: 0;
        background: white;
        width: max-content;
        padding: 0;
        z-index: 10;
        border: 1px solid var(--border-color);
        /*border-radius: 0.5em;*/
        /*box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);*/
    }

    .autocomplete .option {
        z-index: 1;
        display: block;
        padding: 0.25em;
    }

        .autocomplete .option .option-text {
            margin-block: .5em;
        }

        .autocomplete .option:hover {
            background: #1E90FF;
            color: #fff;
            cursor: pointer;
        }

        .autocomplete .option.disabled {
            background-color: lightgrey;
            /*cursor: not-allowed;*/
        }

            .autocomplete .option.disabled:hover {
                background: lightgrey;
                color: var(--bg-dark);
            }

    .autocomplete:not(:focus-within) ul {
        opacity: 0%;
        /*transform: scale(0);*/
        /*display: none;*/
    }