@import (reference) '../../customize/src/less2/include/framework.less';

&.cp-app-calendar {

    .framework_min_main();

    display: flex;
    flex-flow: column;

    #cp-calendar {
        .tui-full-calendar-layout {
            background-color: @cp_sidebar-right-bg !important;
            color: @cryptpad_text_col;
        }
        .tui-full-calendar-timegrid-gridline, .tui-full-calendar-time-date {
            border-color: @cp_calendar-border !important;
        }
        .tui-full-calendar-splitter, .tui-full-calendar-left, .tui-full-calendar-dayname-container, .tui-full-calendar-weekday-grid-line {
            border-color: @cp_calendar-border !important;

        }
        .tui-full-calendar-popup-container {
            background: @cp_flatpickr-bg;
            color: @cryptpad_text_col;
        }
        .tui-full-calendar-popup-section-item {
            height: auto;
            &:not(button) {
                border: none;
                display: inline-flex;
                align-items: center;
                padding-left: 0;
                input { flex: 1; }
            }
        }
        .tui-full-calendar-popup-section {
            display: flex;
            align-items: center;
        }
        .tui-full-calendar-section-date-dash {
            height: auto;
        }
        .tui-full-calendar-section-title, .tui-full-calendar-section-location {
            width: 100%;
        }
        .tui-full-calendar-dropdown-menu {
            top: 38px;
            background-color: @cp_dropdown-bg;
            color: @cp_dropdown-fg;
        }
        .tui-full-calendar-section-state, #tui-full-calendar-schedule-private {
            display: none;
        }

        .cp-calendar-close {
            height: auto;
            line-height: initial;
            border: 1px solid;
            &:not(:hover) {
                background: transparent;
            }
        }
    }

}