﻿@use "../../wwwroot/scss/variables" as *;

.bb-multi-filter {
    --bb-multi-filter-height: 180px;
    --bb-multi-filter-width: 224px;
    --bb-multi-filter-search-margin-bottom: 1rem;
    --bb-multi-filter-body-item-bg: #fff;
    --bb-multi-filter-body-item-hover-bg: #fff;
    --bb-multi-filter-body-item-margin: .5rem;
    position: relative;

    .bb-multi-filter-search {
        margin-block-end: var(--bb-multi-filter-search-margin-bottom);
    }

    .bb-multi-filter-list {
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--bb-multi-filter-body-item-margin);

        .bb-multi-filter-header {
            margin-block-end: var(--bb-multi-filter-body-item-margin);
            padding-bottom: var(--bb-multi-filter-body-item-margin);
            border-bottom: var(--bs-border-width) solid var(--bs-border-color);
        }

        .bb-multi-filter-body {
            height: var(--bb-multi-filter-height);
            width: var(--bb-multi-filter-width);
            margin-block-start: var(--bb-multi-filter-body-item-margin);

            .bb-multi-filter-body-item {
                background-color: var(--bb-multi-filter-body-item-bg);

                .form-check {
                    width: 100%;

                    .form-check-input + .form-check-label {
                        text-overflow: unset;
                        overflow: unset;
                    }
                }

                &:not(:last-child) {
                    margin-block-end: var(--bb-multi-filter-body-item-margin);
                }

                &:hover {
                    background-color: var(--bb-multi-filter-body-item-hover-bg);
                }
            }
        }
    }

    .bb-multi-filter-loading {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--bs-body-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
