/* Frame grid */
.frame-grid {
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.figure-frame,
.project-frame {
    transition: 
        border-color 0.2s ease,
        background-color 0.2s ease,
        width 0.2s ease,
        height 0.2s ease;
}

html.frame-size-micro { --frame-size: 150px; }
html.frame-size-mini { --frame-size: 200px; }
html.frame-size-normal { --frame-size: 280px; }
html.frame-size-large { --frame-size: 400px; }

html.frame-size-micro .frame-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

html.frame-size-small .frame-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

html.frame-size-normal .frame-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

html.frame-size-large .frame-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Frame sizes */
html.frame-size-micro .figure-frame,
html.frame-size-micro .project-frame {
    width: 150px;
    height: 150px;
}

html.frame-size-small .figure-frame,
html.frame-size-small .project-frame {
    width: 200px;
    height: 200px;
}

html.frame-size-normal .figure-frame,
html.frame-size-normal .project-frame {
    width: 280px;
    height: 280px;
}

html.frame-size-large .figure-frame,
html.frame-size-large .project-frame {
    width: 400px;
    height: 400px;
}

/* Frame render modes */
html.render-mode-wireframe .figure-frame,
html.render-mode-skeleton .figure-frame,
html.render-mode-wireframe .project-frame,
html.render-mode-skeleton .project-frame,
html .figure-frame,
html .project-frame {
    background-color: #1F2937;
}

html.render-mode-filled .figure-frame,
html.render-mode-filled .project-frame {
    background-color: #ffffff;
}

/* Frame hover states */
.figure-frame,
.project-frame {
    border: 2px solid #374151;
    border-radius: 7px;
}

.figure-frame.is--action,
.project-frame.is--action {
    border-style: dashed !important;
}

.figure-frame.is--action:not(.selected),
.project-frame.is--action:not(.selected) {
    background-color: #1f293770;
}

.figure-frame:hover,
.project-frame:hover {
    border: 2px solid #60A5FA;
}

html.render-mode-wireframe .figure-frame.selected,
html.render-mode-skeleton .figure-frame.selected,
html.render-mode-wireframe .project-frame.selected,
html.render-mode-skeleton .project-frame.selected,
html .figure-frame.selected,
html .project-frame.selected {
    border: 2px solid #60A5FA;
    background-color: #1E3A8A !important;
}

html.render-mode-filled .figure-frame.selected,
html.render-mode-filled .project-frame.selected {
    background-color: #DBEAFE !important;
}

.figure-frame.selected:hover,
.project-frame.selected:hover {
    border: 2px solid #c3ddfd;
}

/* Skeleton visibility */
html.render-mode-skeleton .skeleton-group {
    visibility: visible;
}

html:not(.render-mode-skeleton) .skeleton-group {
    visibility: hidden;
}

.is--action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}