$o-wevent-bg-color-base: $gray-100;
$o-wevent-bg-color-base-contrast: color-contrast($o-wevent-bg-color-base);
$o-wevent-bg-color-light: mix($o-wevent-bg-color-base, #E9ECEF);
$o-wevent-bg-color-dark: mix($o-wevent-bg-color-base, #24363a);
$o-wevent-color: $body-color;

.o_wevent_index, .o_wevent_event {

    // Simple colored tags according to assigned background color
    @for $size from 1 through length($o-colors) {
        .o_tag_color_#{$size - 1} {
            @if $size == 1 {
                & {
                    background-color: white;
                    color: nth($o-colors, $size);
                    box-shadow: inset 0 0 0 2px nth($o-colors, $size);
                }
                &::after {
                    background-color: nth($o-colors, $size);
                }
            } @else {
                &, &::after {
                    background-color: nth($o-colors, $size);
                    color: $white;
                }
            }
        }
    }

    // Complex colored tags according to assigned background color with hover effect
    @for $size from 1 through length($o-colors) {
        .o_tag_color_hovered_#{$size - 1} {
            $background-color: $o-wevent-bg-color-base;
            // no color selected
            @if $size == 1 {
                & {
                    color: color-contrast($background-color);
                    background-color: $background-color;
                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
                }
            } @else {
                $background-color: nth($o-colors, $size);
                & {
                    color: white;
                    background-color: $background-color;
                }
            }
            @at-root a#{&} {
                &:hover {
                    background-color: darken($background-color, 20%);
                }
            }
        }
    }

    /*
     * COMMON MENU STYLING
     */

    .o_wevent_index_topbar_filters {
        .dropdown-menu {
            max-height: 250px;
            overflow-y: auto;
        }
    }

    /*
     * COMMON TO ALL ONLINE-* PAGES
     */

    .o_wevent_online {
        // unpublished badge: put opacity to distinguish form other badges
        .o_wevent_online_badge_unpublished{
            opacity: 0.4;
        }
        .o_wesession_list_item{
            margin: 1rem 0;
            border: 1px solid;
            border-left: 10px solid;
        }
        // background color-based for new styling
        @for $size from 2 through length($o-colors) {
            .event_color_#{$size - 1} {
                &.event_track{
                    $-bg: adjust-color(nth($o-colors, $size), $lightness: 40%, $saturation: 15%);
                    @include o-print-color($-bg, background-color, bg-opacity);
                    > div{
                        border-top: 3px solid adjust-color(nth($o-colors, $size), $lightness: 10%, $saturation: 15%);
                    }
                }
                &.o_wesession_list_item{
                    border-color: adjust-color(nth($o-colors, $size), $lightness: 30%, $saturation: 15%);
                    background-color: unset;
                }
            }
        }
        .event_color_0 {
            color: $o-wevent-bg-color-base-contrast;

            &.event_track{
                border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
            }
            &.o_wesession_list_item{
                border-color: $o-wevent-bg-color-light;
            }
        }

        .o_wevent_online_page_container {

            // Sponsor Avatar
            .o_wevent_online_page_avatar {
                min-width: 64px;
                img {
                    max-width: 96px;
                }
            }
        }
    }

    // To be more efficiently implemented by using default Bootstrap accordion
    // components
    .o_wevent_collapse_link:not(.collapsed) .oi {
        transform: rotate(180deg);
    }

    .o_wevent_cta  {
        color: #fff;
        background-color: $o-enterprise-color;
        border: $o-enterprise-color;
        &:hover {
            color: #fff;
            background-color: #624159;
            border-color: #52374b;
        }
        &:focus {
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(134, 102, 126, 0.5);
        }
    }
}

.o_wevent_badge {
    padding: ($spacer * .5) $spacer;
    border-radius: 10rem;
    font-weight: $font-weight-normal;
}

.modal-open {
    > .modal-backdrop {
        z-index: $zindex-dropdown - 1;
    }
}