/* button bar */


@media only screen and (min-width: 1280px) {

    #home #cms-gallery {

        /* We shouldn't have text on gallery when we apply this button style */
        .slide {
            .text {
                /* 
                max-width: calc(100% - var(--side-padding, 4vw) - var(--custom-buttons-over-gallery-width) - 50px);
                left: unset;
                right: 15px;
                */
                display: none;
            }

            .title {
                h1 {
                    font-size: 22px;
                }
            }
        }

        .play.button-action,
        .pause.button-action {
            left: unset;
            right: 15px;
        }
    }

    #home #buttons-b3 {
        position: absolute;
        bottom: 0;
        left: var(--side-padding, 4vw);
        width: 1150px;
        box-sizing: border-box;

        --button-border-opacity: 20%;

        .wrapper {
            background-color: var(--button-bg-color);
            background-color: color-mix(in srgb, var(--button-bg-color) 94%, transparent);
            border-radius: 10px 10px 0px 0px;
            gap: 15px 20px;
            box-sizing: border-box;
            padding: 35px;
            display: grid;
            grid-template-columns: repeat(var(--cols-big-desktop), 1fr);
        }

        .button {
            background-color: transparent;
            height: auto;
            border: 0;
            box-sizing: border-box;
            text-align: left;
            justify-content: flex-start;
        }

        .button-link {
            padding: 0;
            display: flex;
            width: 100%;
            padding-top: 10px;
            padding-bottom: 25px;
            align-items: center;
            gap: 15px;
            text-align: left;
            position: relative;
            border-bottom: 1px solid color-mix(in srgb, var(--button-custom-border-color, var(--icon-and-text-color)) var(--button-border-opacity), transparent);

        }

        .icon-wrapper {
            margin-bottom: 0;
            align-items: center;

            .raw-svg span,
            .rw-svg svg {
                height: 25px;
                width: 25px;

            }

            .raw-svg svg path {
                fill: var(--icon-color, var(--primary-color)) !important;
            }
        }

        .button-title {
            text-transform: none;
            font-weight: 400;
            font-size: var(--button-font-size, 16px);
            line-height: 1.1;
        }

        .wrapper {

            /* 10+ buttons → 5x2 */
            &:has(.buttons-10) {
                --cols-big-desktop: 5;
            }

            /* 9 buttons → 3x3 */
            &:has(.buttons-9) {
                --cols-big-desktop: 3;

                .button:nth-last-child(-n+3) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }

            /* 8 or 7 → 4x2 */
            &:has(.buttons-8),
            &:has(.buttons-7) {
                --cols-big-desktop: 4;

                .button:nth-last-child(-n+4) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }

            /* 6 or 5 → 3x2 */
            &:has(.buttons-6),
            &:has(.buttons-5) {
                --cols-big-desktop: 3;

                .button:nth-last-child(-n+3) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }

            &:has(.buttons-4) {
                --cols-big-desktop: 4;

                .button:nth-last-child(-n+4) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }

            &:has(.buttons-3) {
                --cols-big-desktop: 3;

                .button:nth-last-child(-n+3) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }

            &:has(.buttons-2) {
                --cols-big-desktop: 2;

                .button:nth-last-child(-n+2) {
                    .button-link {
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }
            }
        }
    }
}