@import "variables";

vn-zone-calendar {
    display: block;

    & > vn-card {
        & > .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: $color-main;
            color: white;
            font-weight: bold;
            height: 45px;

            & > .vn-button {
                color: inherit;
                height: 100%;
            }
        }
        & > .calendars {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            & > .vn-calendar {
                max-width: 288px;
                
                .day {
                    &.event .day-number {
                        background-color: $color-success;
                    }
                    &.excluded .day-number {
                        background-color: $color-alert;
                    }
                }
            }
        }
    }
}