@import url('./common.css');

.body-sketch {
    background-color: var(--sk-bk-color);
    /* Semi-transparent background */
}

.body-model {
    background-color: var(--md-bk-color);
    /* Semi-transparent background */
}

#bordered-section {
    border-right: 2px solid var(--secondary-color);
    /* Adds a border on the right */
    padding-right: 16px;
    /* Optional: Adds spacing between content and border */
    height: auto;
    /* Ensures it adapts to the height of the content */
}

.nav-container {
    position: fixed;
    /* Keep the sidebar fixed on the left */
    top: 0;
    left: 0;
    height: 100vh;
    /* Full height of the viewport */
    z-index: 5;
    /* Ensure it appears below the project name overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6% 0;
    padding-left: 16px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    justify-content: top;
    align-items: top;
    gap: 24px;
    /* Space between navigation buttons */
}

.nav-btn img {
    width: var(--icon-size);
    /* Size of the icons */
    height: auto;
}

/* Enlarge icon on hover */
/* .nav-btn img:hover {
    width: calc(var(--icon-size) * 1.2);
} */

.nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-btn a.disabled {
    pointer-events: none;
    /* Prevent clicks */
    opacity: 0.5;
    /* Dim the icon to indicate it is disabled */
    cursor: not-allowed;
    /* Show a "not-allowed" cursor */
}

.nav-divider {
    width: 32px;
    /* Adjust the width as needed */
    height: 2px;
    /* Thickness of the divider */
    /* margin: 12px auto; */
    /* Add space around the divider */
    background-color: var(--primary-color);
    /* Use a color variable or a specific color like #ccc */
    border-radius: 5px;
}

.nav-section {
    display: flex;
    /* Ensure the buttons stay inline */
    flex-direction: column;
    /* Stack buttons vertically */
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* Smooth transition */
    max-height: 500px;
    /* Adjust based on content height */
    overflow: hidden;
    /* Hide overflowing content */
    opacity: 1;
    /* Fully visible */
    gap: 24px;
    /* Space between navigation buttons */
}

.nav-section.hidden {
    max-height: 0;
    /* Collapse the height */
    opacity: 0;
    /* Hide the section visually */
}

/* .sheet name */
.project-name {
    position: fixed;
    /* Make it an overlay */
    top: 10px;
    /* Position it at the top */
    left: 50%;
    transform: translateX(-50%);
    /* Center it horizontally */
    z-index: 10;
    /* Ensure it appears above everything else */
    padding: 10px 20px;
    border-radius: 5px;
    /* Rounded edges for the overlay */
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.04); Optional shadow for visibility */
}

.project-name a {
    display: inline-flex;
    /* Enable flexbox for horizontal alignment */
    align-items: center;
    /* Vertically align image and text */
    text-decoration: none;
    /* Remove underline (optional) */
    color: var(--primary-color);
    /* Set text color */
    font-size: 16px;
    /* Set font size */
}

.project-name img {
    margin-right: 8px;
    /* Add space between the image and the text */
    height: 24px;
    /* Adjust image size as needed */
    width: auto;
    /* Maintain aspect ratio */
}

.project-name a:hover {
    text-decoration: underline;
    /* Optional: Add underline on hover */
}

.canvas-container {
    height: calc(100vh - 50px);
    /* Adjust height based on project name overlay */
}

/* Style for the canvas */
.sketch-canvas {
    position: relative;
    left: 0;
    /* Start the canvas where the nav ends */
    top: 0;
    width: 100vw;
    /* Adjust width dynamically to fit the viewport */
    height: 100vh;
    /* Full viewport height */
    z-index: 1;
    /* Lower z-index ensures it stays below the nav */
}