@import '../../utils/colors.less';
@import '../../utils/fonts.less';

.daggerheart.levelup {
    .summary-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;

        h3 {
            color: light-dark(@dark, @beige);
            margin: 0;
            white-space: nowrap;
        }
    }
    .levelup-summary-container {
        overflow: auto;
        padding: 10px 0;
        scrollbar-width: thin;
        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
        max-height: 700px;
        mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);

        .level-achievements-container,
        .level-advancements-container {
            display: flex;
            flex-direction: column;
            gap: 8px;

            h2,
            h3,
            h4,
            h5 {
                margin: 0;
                color: light-dark(@dark, @beige);
            }
        }

        .increase-container {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: light-dark(@dark, @beige);
        }

        h5.summary-section {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 16px;
            color: light-dark(@dark, @beige);
            margin-bottom: 5px;
        }

        .summary-selection-container {
            display: flex;
            gap: 8px;

            .summary-selection {
                border: 2px solid;
                border-radius: 3px;
                padding: 0 4px;
                font-size: 14px;
                color: light-dark(@dark, @beige);
            }
        }
    }
}