$bg-color: #78ACCD;
$white: #ffffff;
$black: #333333;
$gray: #7D8994;
$orange: #DE6E46;
$purple: #AE5989;

$radius: 50%;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
    font-family: sans-serif;
    line-height: 1.6;
}

body {
    background: $bg-color;
    color: $black;
    font-size: 1.5rem;
}

ul {
    list-style: none;
}

.card {
    background: $white;
    width: 90%;
    max-width: 40rem;
    min-height: 40rem;
    margin: 5rem auto;
    display: grid;
    grid-template-rows: 8rem auto 10rem;
    box-shadow: 0 1rem 2.5rem rgb(27, 64, 94);

    &__header {
        padding: 0 1.25rem;
        color: $gray;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &__body {
        padding: 1.5rem 2rem;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        &--days {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 4rem;

            li {
                flex: 1;
                font-weight: bold;
                text-transform: uppercase;
                text-align: center;
                color: $gray;
                margin: 0 1px;
            }
        }
        &--dates {
            display: grid;
            gap: 3px;
            grid-template-columns: repeat(7, 1fr);
            justify-items: center;
            text-align: center;
            li {
                width: 3.5rem;
                height: 3.5rem;
                display: grid;
                place-items: center;
                font-weight: bold;
                position: relative;
            }
            li.prev,
            li.next {
                color: #ccc;
            }
            li.active {
                background: $orange;
                color: $white;
                border-radius: $radius;
            }
            li.circle {
                border: 2px solid;
                border-radius: $radius;
                span {
                    position: absolute;
                    top: -0.75rem;
                    right: -0.5rem;
                    width: 1.75rem;
                    height: 1.75rem;
                    font-size: 1.2rem;
                    color: $white;
                    border-radius: $radius;
                }
            }
            .circle.orange {
                border-color: $orange;
                span {
                    background: $orange;
                }
            }
            .circle.purple {
                border-color: $purple;
                span {
                    background: $purple;
                }
            }
        }
    }
    &__footer {
        @extend .card__header;
        color: $black;
        font-weight: bold;

        .add {
            text-decoration: none;
            color: inherit;
            border: 2px solid $orange;
            border-radius: $radius;
            width: 3.5rem;
            height: 3.5rem;
            padding-top: 0.25rem;
            display: grid;
            place-items: center;
        }
    }
}