@summaryItemWidth: 40px;
@summaryItemWidthDesktopXL: 2.05vw;
@summaryItemSpacerDesktop: calc( ( @contentWidth - ( var(--summary-items) * @summaryItemWidth) ) / var(--summary-items) );
@summaryItemSpacerDesktopXL: calc( ( @contentWidthDesktopXL - ( var(--summary-items) * @summaryItemWidthDesktopXL) ) / var(--summary-items) );
@summaryItemSpacerModifier: 3px;

.summary {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;

    @media (max-width: @responsiveMobileXL) {
        display: none;
    }
}
.summary__item {
    position: relative;
    display: block;
    width: @summaryItemWidth;
    text-align: center;
    z-index: 1;

    @media (min-width: @responsiveDesktopXL) {
        width: @summaryItemWidthDesktopXL;
    }

    & ~ .summary__item {
        @media (min-width: @responsiveDesktop) {
            &:before {
                content: '';
                position: absolute;
                top: auto;
                bottom: @summaryItemSpacerModifier;
                left: auto;
                right: calc(100% + @summaryItemSpacerModifier);
                display: block;
                width: @summaryItemSpacerDesktop;
                height: 1px;
                background: @colorHover;

                @media (prefers-color-scheme: dark) {
                    background: @colorHoverDark;
                }
            }
        }
        @media (min-width: @responsiveDesktopXL) {
            &:before {
                width: @summaryItemSpacerDesktopXL;
            }
        }
    }
}
.summary__item-btn {
    color: lighten(@colorFont, 40%);
    
    @media (max-width: @responsiveMobileL) {
        font-size: 1.1rem;
    }
    @media (min-width: @responsiveDesktopXL) {
        font-size: @15px;
    }

    &.is-active {
        font-weight: 700;
        color: @colorFont;

        @media (prefers-color-scheme: dark) {
            color: @colorFontDark;
        }
    }
}