/* ---------- Custom Buttons Events Page V2 ---------- */
#app .event-cal-container .toolbar-header:has(.eventsCustomButtons.version-2) {
    display: flex;
    flex-wrap: wrap;
}

.eventsCustomButtons.version-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding: unset;

    a.custom-button {
        border-radius: 8px;

        .custom-button__title {
            white-space: nowrap;
        }
    }

    /* Dropdown */
    .custom-dropdown {
        position: relative;

        /* Toggle Button */
        .dropdown-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            white-space: nowrap;

            min-height: 44px;
            padding: 0.2em 1.25em;
            font-size: 16px;
            line-height: 1.3;

            color: var(--custom-event-button-link-color, var(--primary-color));
            background-color: var(--custom-event-button-bg-color, #f2f2f2);
            border: 1px solid var(--custom-event-button-border-color,
                    var(--custom-event-button-link-color, var(--primary-color)));
            border-radius: 8px;

            transition: all 0.35s ease-in-out;

            &::after {
                content: "▼";
                font-size: 0.65em;
                margin-left: 0.5em;
                transition: transform 0.25s ease;
            }

            &.open::after {
                transform: rotate(-180deg);
            }

            &:hover,
            &.open {
                background-color: var(--custom-event-button-hover-bg-color,
                        var(--primary-color));
                color: var(--custom-event-button-hover-link-color,
                        var(--primary-color-contrast));
            }
        }

        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;

            min-width: 220px;
            margin-top: 6px;
            padding: 6px 0;

            background: #fff;
            border: 1px solid #ddd;
            border-radius: 0.75em;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

            &.show {
                display: block;
            }

            /* Dropdown Items */
            .dropdown-item {
                display: block;
                width: 100%;
                box-sizing: border-box;

                padding: 10px 16px;
                font-size: 15px;
                line-height: 1.4;
                text-align: left;

                color: var(--custom-event-button-link-color, var(--primary-color));
                background: transparent;
                text-decoration: none;
                border: none;
                border-radius: 0;

                transition: background-color 0.25s ease-in-out,
                    color 0.25s ease-in-out;

                &:hover {
                    background-color: var(--custom-event-button-hover-bg-color,
                            var(--primary-color));
                    color: var(--custom-event-button-hover-link-color,
                            var(--primary-color-contrast));
                }

                .dropdown-item__title {
                    white-space: nowrap;
                }
            }
        }
    }
}


/* ---------- Custom Buttons Events Page V2 ---------- */