// Variables
$o-cw-color-today-accent: $o-danger;
$o-cw-filter-avatar-size: 20px;

// Animations
@keyframes backgroundfade {
    from {
        background-color: rgba($info, 0.5);
    }
    to {
        background-color: rgba($info, 0.1);
    }
}

.o_calendar_container {
    grid-template-columns: auto minmax(auto, 210px);

    @include media-breakpoint-up(md){
        grid-template: auto 1fr / 1fr auto;
        grid-template-areas:
            "head head"
            "cal side";
    }

    .o_calendar_header {
        grid-area: head;
    }
}

.o_calendar_sidebar_container {
    --Avatar-size: #{$o-cw-filter-avatar-size};

    flex: 0 0 auto;
    position: relative;
    grid-area: side;
    background-color: $o-view-background-color;

    .o_calendar_sidebar {
        @include o-webclient-padding($top: $o-horizontal-padding/2);
        @include media-breakpoint-up(xl){
            width: 210px;
        }

        .o_datetime_picker {
            --DateTimePicker__Cell-size-md: 1.8rem;
            @include media-breakpoint-up(xl){
                --DateTimePicker__Cell-size-md: 1.5rem;
            }
            padding-right: 0 !important;
            padding-left: 0 !important;

            .o_day_of_week_cell {
                --background-color: transparent;
                border: none !important;
            }

            .o_cell_md {
                font-size: .75rem;
            }
        }

        // sync buttons are only displayed on calendar.event views
        .o_calendar_sync {
            padding-bottom: 0.5em;
        }
    }

    .o_calendar_filter {

        .o_calendar_filter_items_checkall,
        .o_calendar_filter_item {

            button.o_remove {
                transform: translate(100%, -50%);
            }

            &:hover {
                button.o_remove {
                    transform: translate(0%, -50%);
                }
            }
        }

        .o_field_many2one {
            margin-top: 1rem;
            width: 100%;
        }
    }
}

.modal {
    .o_attendee_head {
        width: 32px;
        margin-right: 5px;
    }
}

.o_dashboard {
    .o_calendar_container .o_calendar_sidebar_container {
        display: none;
    }
}