@use "sass:list";
@use "sass:map";
@import './eos_colors.scss';
 

.calendar-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
    overflow-x: auto;
    
    & ul {
        list-style: none;
        padding-left: 0px;
        margin: 0px;

        & li {
            position: relative;

            .calendar-event {
                width: 90%;
                border: 1px solid white;
                border-radius: 5px;                
                display: flex;
                flex: 1;                
                position:absolute;                
                padding: 0px;
                font-size: 8pt;
                overflow: hidden;  
                z-index: 1;

                .calendar-event-text {
                    padding: 0.5rem;
                    display: flex;
                    flex-direction: column;
                }    

                .calendar-event-title {
                    font-weight: 800;
                    text-overflow: ellipsis;
                }

                .calendar-event-description {
                    text-align: justify;
                }

                &:hover {
                    z-index: 11;
                    border: none;
                    box-shadow: 5px 5px 7px map.get($grey, 'darken-1');
                    min-width: 100px;
                    min-height: 100px;
                }
                
            }
        }


    }

    .calendar-cell {
        cursor: pointer;
        min-width: 60px;
        display: flex;
        flex: 1;
        &:not(:last-child) {
            border-bottom: 1px dotted map.get($grey, 'lighten-4');
        }
      }
    .break-cell {
        background-color: map.get($grey, 'lighten-4');
        cursor: not-allowed;
    }
    .hours {
        font-weight: 500;
        font-size: 0.85rem;
        width: 55px;
        padding-left: 10px;
    }

    .calendar-header {
        display: flex;
        flex-direction: column;
    }

    .user-header {
        display: flex;
        justify-content: space-around;
    }

    & table {
        border-collapse: collapse;
        border-color: map.get($grey, 'lighten-2');
        width: 100%;
        & td:first-child {
            width: 55px;
        }
    }

    & thead, tbody, td, th {
        border-color: map.get($grey, 'lighten-2');
    }  

    & td {
        padding: 0px;
    }  
}

.letters-date {
    padding: 0.5rem;
    text-transform: uppercase;
    font-size: smaller;
    font-weight: 500;
}
.number-date {
    font-size: x-large;
    font-weight: 500;
    border-radius: 100%;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    display:flex;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
} 

.today {
    .number-date {
        background-color: map.get($teal, 'accent-3');
        color: white
    }
}