@import "bootstrap.scss";
@import "./sidebar.scss";
@import "./tables.scss";


/* widths */

.mw-10rem {
    max-width: 10rem;
}

.col-switch-width {
    width: 3.5rem;
    min-width: 3.5rem;
    max-width: 3.5rem;
}


/* Server Tabs */

#serverTabs .nav-item .nav-link:hover:not(.active) {
    background-color: var(--bs-secondary-bg);
}

#serverTabs .nav-item .nav-link:not(.active) {
    color: var(--bs-text-body);
}

.act-as-link {

    color: rgba(var(--bs-link-color-rgb), 1);
    text-decoration: none;

    &:hover { color: var(--bs-link-hover-color-rgb); }
    &:disabled, &.disabled { color: var(--bs-secondary-color) }

}


// Custom Select Component

.corbz-select.is-invalid +.corbz-select-container {

    border-color: var(--bs-form-invalid-border-color);

    .corbz-select-dropdown {

        border-top: 0;
        border-color: var(--bs-form-invalid-border-color);

    }

}

.corbz-select-container {

    position: relative;
    display: block;
    appearance: none;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    outline: 0 !important;

    &.active {

        border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;

        .corbz-select-selected::after {

            transform: translateY(-50%) rotate(180deg);

        }

    }

    .corbz-select-selected {

        height: 100%;
        width: 100%;
        max-width: 100%;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.375rem 0.75rem;
        padding-right: calc(1.5em + 0.75rem);
        cursor: pointer;

        // Arrow icon
        &::after {

            content: "\f282";
            font-family: "bootstrap-icons";
            font-weight: normal;
            font-size: 0.7rem;
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;

        }

    }

    .corbz-select-dropdown {

        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: calc(100% + 2.25px);
        transform: translateX(-1px);
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
        box-shadow: var(--bs-box-shadow);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        outline: 0;

        .corbz-select-search {

            // display: none;  // disabled for now
            width: 100%;
            padding: 0.375rem 0.75rem;
            background: none;
            border: none;
            border-bottom: 1px solid var(--bs-border-color);
            outline: none;
            
        }

        .corbz-select-text {

            padding: 0.375rem 0.75rem;
            color: var(--bs-secondary-color);
            @extend small;

        }
        
        .corbz-select-option {

            padding: 0.375rem 0.75rem;
            cursor: pointer;
            outline: 0;

            &:hover, &:focus { background-color: var(--bs-tertiary-bg); }
            &.active {

                color: var(--bs-white);
                background-color: var(--bs-primary);

            }

            // Multi-select versions
            > .corbz-option-checkbox {

                --bs-form-check-bg-image: none;

                width: 1rem;
                height: 1rem;
                appearance: none;
                background-color: var(--bs-body-bg);
                background-image: var(--bs-form-check-bg-image);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                border: var(--bs-border-width) solid var(--bs-border-color);
                border-radius: var(--bs-border-radius-sm);
                vertical-align: middle;
                outline: 0;

                &:checked {

                    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
                    background-color: var(--bs-primary);
                    border-color: var(--bs-primary);

                }

                &:focus {

                    border-color: #86b7fe;
                    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

                }

            }

            > span {

                display: inline-block;
                vertical-align: middle;
                margin-left: 0.75rem;

            }

        }

    }

}
