@import "variables";

vn-calendar {
    display: block;
    max-width: 250px;

    .header vn-one {
        text-align: center;
        padding: 0.2em 0
    }

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

        .weekdays {
            border-bottom: 1px solid $color-hover-cd;
            border-top: 1px solid $color-hover-cd;
            color: $color-font-secondary;
            font-weight: bold
        }

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

            span {
                transition: background-color 0.3s;
                text-align: center;
                font-size: .8em;
                border-radius: 50%;
                display: block;
                padding: 0.2em;
                cursor: pointer
            }
        }

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

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

        .day.orange {
            font-weight: bold;
            color: $color-main;
        }
        
        .day.orange-circle {
            color: $color-font;
            & > span {
                background-color: $color-main
            }
        }

        .day.orange-circle:hover {
            & > span {
                background-color: $color-main-medium
            }
        }

        .day.light-orange {
            color: $color-main-medium
        }

        .day.green {
            font-weight: bold;
            color: $color-success;
        }

        .day.green-circle {
            color: $color-font;
            & > span {
                background-color: $color-success
            }
        }

        .day.green-circle:hover {
            & > span {
                background-color: $color-success-medium
            }
        }

        .day.light-green {
            font-weight: bold;
            color: $color-success-medium
        }

        .day.blue {
            font-weight: bold;
            color: $color-notice;
        }

        .day.blue-circle {
            color: $color-font;
            & > span {
                background-color: $color-notice
            }
        }

        .day.blue-circle:hover {
            & > span {
                background-color: $color-notice-medium
            }
        }

        .day.light-blue {
            font-weight: bold;
            color: $color-notice-medium
        }

        .day.red {
            font-weight: bold;
            color: $color-alert
        }

        .day.red-circle {
            color: $color-font;
            & > span {
                background-color: $color-alert
            }
        }

        .day.red-circle:hover {
            & > span {
                background-color: $color-alert-medium
            }
        }

        .day.light-red {
            font-weight: bold;
            color: $color-alert-medium;
        }
    }
}