//@import "../../../abstracts/abstracts";


#classlist-matterport {
    #dbq-matterport-states-container {
        .dbqmp-states {
            button {
                padding: 7.5px 15px;
                svg {
                    width: 20px;
                    height: 20px;
                }
                &:hover {
                    border-color: #000;
                }
            }
        }
    }

    #dbq-matterport-right-menu {
        .ui-accordion-header {
            font-size: $font-size-medium;
            background: $color-gray-lighter !important;
            text-transform: initial !important;
            cursor: pointer;

            &.ui-state-active {
                background: $color-primary !important;
                border: none;
                color: $text-color-button-default !important;
            }
        
            &.ui-state-disabled {
                color: $color-gray-dark !important;
                cursor: not-allowed;
            }
        }
    }

    #dbq-matterport-left-menu {
        .dbqmp-location {
            .dbqmp-location-buttons {
                .btn-group {
                    padding: 0 !important;
                }
                .dbqmp-btn:not(.btn-group) {
                    background: transparent;
                    border-color: transparent;
                    height: auto;

                    // Note from Jeroen @ 22-01-2025: When clicking this button a dropdown might show. 
                    // When the padding was bigger, the dropdown would display outside of the item and when 
                    // attempting to click on a dropdown item, the dropdown would be hidden. By changing
                    // the padding, the dropdown will start inside the item and fixing this issue for now.
                    //padding: 7.5px 15px !important;
                    padding: 0 10px !important; 
                    
                    svg {
                        width: $svg-icon-size;//20px;
                        height: $svg-icon-size;//20px;
                        color: color(text-color-default);
                    }
                    &:hover {
                        background: transparent;
                        border-color: transparent;
                        svg {
                            color: $color-primary;
                        }
                    }
                }
            }
        }
    }
}