@import "colors";

vn-calendar {
    width: 100%;

    .header vn-one {
        text-align: center
    }

    .body {
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;

        & > .day {
            box-sizing: border-box;
            padding: 0.1em;
            width: 14.2857143%;
            line-height: 1.5em;

            span {
                text-align: center;
                font-size: 0.8vw;
                border-radius: 50%;
                display: block;
                padding: 0.2em;
                cursor: pointer
            }
            
        }

        & > .day:hover span {
            background-color: #DDD
        }

        & > .day.gray {
            color: $secondary-font-color
        }
    }
    
}