@import "theme-editor.css";

/* Lumo Compact Sizing - CSS variables approach (Vaadin 25 recommended) */
html {
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
}

.rounded-border {
    border: 1px solid slategray;
    border-radius: 3px;
}

.step-border {
    border-radius: 3px;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.new-element {
    animation: fadein 2s ease-in-out forwards;
    background-color: lightgreen;
}

.container {
    display: flex;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow */
}

.primary-section {
    flex: 0 0 auto; /* Don't grow, shrink, or flex */

    overflow-y: auto; /* Enable vertical scrolling */
    width: 250px; /* Or whatever width you want */
}

.secondary-section {
    flex: 1 1 auto; /* Grow, shrink, and flex */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* styles.css */

/* This makes the scrollbar slim */
::-webkit-scrollbar {
    width: 12px;
}

/* This styles the "thumb" or the handle of the scrollbar */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* This styles the "track" or the background of the scrollbar */
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}