/*
 * Copyright (c) 2024 Biovisuals Private Limited
 * All rights reserved.
 *
 * This software is the confidential and proprietary information of Biovisuals Private Limited.
 * You shall not disclose such Confidential Information and shall use it only
 * in accordance with the terms of the license agreement you entered into with Biovisuals Private Limited.
 */

/* shape-container.css */
.shape-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust gap as needed */
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Add rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px; /* Adjust width as needed */
    box-sizing: border-box;
    position: absolute;
    top: 60px; /* Adjust top position as needed */
    z-index: 10; /* Ensure it appears above other elements */
    display: none; /* Hide by default */
}

.shape-preview {
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
    background-color: #f9f9f9; /* Light background for shape previews */
    border-radius: 4px; /* Add rounded corners to previews */
    padding: 10px; /* Add padding inside each preview */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Fixed width */
    height: 20px; /* Fixed height */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

.shape-preview:hover {
    background-color: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    transform: scale(1.1); /* Slightly scale up on hover */
}

/* Shape toggle container to position the button and the container */
.shape-toggle-container {
    position: relative;
    display: inline-block;
}