@import url('../Shared/CSS/shared.css');

:root {
    --color-hsl-208-35-70: hsl(208deg 35% 70%);
    --color-hsl-0-0-33: hsl(0deg 0% 33%);
    --color-hsl-208-35-20: hsl(208deg 35% 20%);
    --color-hsl-0-0-100: hsl(0deg 0% 100%);
    --color-hsl-0-0-90: hsl(0deg 0% 90%);
    --color-hsl-0-80-80: hsl(0deg 80% 80%);
    --color-hsl-60-100-45: hsl(60deg 100% 45%);
    --color-hsl-60-100-40: hsl(60deg 100% 40%);
    --color-hsl-220-70-50: hsl(220deg 70% 50%);
    --color-hsl-220-70-35: hsl(220deg 70% 35%);
    --color-hsl-0-0-27: hsl(0deg 0% 27%);
    --color-hsl-0-0-0: hsl(0deg 0% 0%);
    --color-hsl-20-80-40: hsl(20deg 80% 40%);
    --color-hsl-20-80-30: hsl(20deg 80% 30%);
}

html {
    text-size-adjust: none;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
}

* {
    box-sizing: border-box;
    appearance: none;

    &:focus {
        outline: 0;
    }
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

body {
    background-color: var(--color-hsl-208-35-70);
    color: var(--color-hsl-0-0-33);
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    height: 100vh;

    .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 10px;
        padding: 15px;
        height: 100%;

        .calendar-item {
            box-shadow: 0 0 3px 0 var(--color-hsl-208-35-20);
            background-color: var(--color-hsl-0-0-100);
            border-radius: 5px;
            padding: 3px;
            display: grid;
            grid-template-rows: 1fr 2fr 2fr;
        }

        .weekend {
            background-color: var(--color-hsl-0-0-90);
        }

        .today {
            background-color: var(--color-hsl-0-80-80);
        }

        p {
            margin: 0;
            padding: 0;
            text-align: center;

            &.month {
                font-size: 0.8rem;
            }

            &.day {
                font-size: 1.7rem;
            }
        }

        .spots {
            display: grid;
            grid-gap: 10px;

            div {
                margin: 0;
                padding: 0;
                border: none;
                border-radius: 3px;

                &.yellow {
                    background-color: var(--color-hsl-60-100-45);
                    border: 1px solid var(--color-hsl-60-100-40);
                }

                &.blue {
                    background-color: var(--color-hsl-220-70-50);
                    border: 1px solid var(--color-hsl-220-70-35);
                }

                &.black {
                    background-color: var(--color-hsl-0-0-27);
                    border: 1px solid var(--color-hsl-0-0-0);
                }

                &.brown {
                    background-color: var(--color-hsl-20-80-40);
                    border: 1px solid var(--color-hsl-20-80-30);
                }
            }
        }
    }
}