.app-calendar {
    width: 100%;

    .calendar-content {
        transition: 1.3s;
    }

    .calendar-header {
        min-height: 36px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;

        ion-icon {
            flex-grow: 1;
        }
        
        span {
            flex-grow: 5;
            text-align: center;
        }
    }

    .calendar-flex {
        display: flex;
        flex-direction: column;
        width: 100vw;

        .calendar-row {
            display: flex;
            flex-direction: row;
            width: 100vw;

            .calendar-col {
                width: calc(100% / 7);
                height: 36px;
                margin: 3px;
                display: flex;
                justify-content: center;
                align-items: center;

                .calendar-day,
                .calendar-week {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                }

                .active {
                    background-color: cornflowerblue;
                    color: white;
                }

                .no-current-month {
                    color: #e3e3e3;
                }
            }
        }
    }

    .calendar-shrink {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e3e3e3;
    }

    .have-data {
        border-radius: 50%;
        width: 5px;
        height: 5px;
        background-color: var(--ion-color-secondary, #0cd1e8);
        margin-bottom: -5px;
    }
}