/* ==============
  Calendar
===================*/

.lnb-calendars-item {
    display: inline-block;
    margin-right: 7px
        /*rtl: margin-left: 7px*/
    ;
}

input[type="checkbox"].tui-full-calendar-checkbox-round+span {
    margin-right: 4px
        /*rtl: 0*/
    ;
    margin-left: 0
        /*rtl: 4px*/
    ;
}

.tui-full-calendar-layout,
.tui-full-calendar-timegrid-timezone {
    background-color: var(--#{$prefix}secondary-bg) !important;
}

.tui-full-calendar-dayname-container,
.tui-full-calendar-left,
.tui-full-calendar-splitter,
.tui-full-calendar-time-date,
.tui-full-calendar-weekday-grid-line,
.tui-full-calendar-timegrid-timezone,
.tui-full-calendar-timegrid-gridline {
    border-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-weekday-exceed-in-week {
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 4px;
    background-color: var(--#{$prefix}custom-white);
    color: var(--#{$prefix}body-color);
    border-color: var(--#{$prefix}border-color);
}

.tui-full-calendar-timegrid-hour {
    color: var(--#{$prefix}body-color) !important;
}

.tui-full-calendar-weekday-schedule-title {
    color: var(--#{$prefix}emphasis-color) !important;

    .tui-full-calendar-time-schedule {
        font-weight: $font-weight-semibold;
    }
}

.tui-full-calendar-popup-container {
    background-color: var(--#{$prefix}custom-white) !important;
    border-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-dropdown {
    &:hover {
        .tui-full-calendar-dropdown-button {
            border-color: var(--#{$prefix}border-color)
        }
    }
}

.tui-full-calendar-popup-section-item {
    &:hover, &:focus {
        border-color: var(--#{$prefix}border-color);
    }
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
    border-top-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
    border-bottom-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-borde {
    border-bottom-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-button {
    color: $input-color;
    background-color: $input-bg  !important;
    border-color: var(--#{$prefix}border-color);
}

.tui-full-calendar-popup-section-item {
    border-color: var(--#{$prefix}border-color);
}

.tui-full-calendar-month-dayname,
.tui-full-calendar-weekday-border {
    border-top-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
    border-bottom-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-dropdown-menu {
    border-color: var(--#{$prefix}border-color) !important;
}

.tui-full-calendar-dropdown-menu-item,
.tui-full-calendar-dropdown-menu {
    background-color: $input-bg  !important;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
    border-top-color: var(--#{$prefix}border-color);
}

.tui-full-calendar-content {
    background-color: $input-bg  !important;
    color: $input-color  !important;
}

.tui-full-calendar-confirm {
    background-color: $danger  !important;
    color: $white  !important;

    &:hover {
        background-color: $red-600  !important;
        color: $white  !important;
    }
}

.tui-full-calendar-month-dayname-item {
    span {
        color: var(--#{$prefix}emphasis-color) !important;
    }
}

.tui-full-calendar-weekday-grid-line {
    &.tui-full-calendar-near-month-day {
        &.tui-full-calendar-extra-date {
            .tui-full-calendar-weekday-grid-header {
                .tui-full-calendar-weekday-grid-date {
                    color: var(--#{$prefix}secondary-color) !important;
                }
            }
        }
    }
}


.tui-full-calendar-weekday-grid-line {
    &.tui-full-calendar-near-month-day {
        .tui-full-calendar-weekday-grid-header {
            .tui-full-calendar-weekday-grid-date {
                color: var(--#{$prefix}emphasis-color) !important;
            }
        }
    }
}