.aw-calendar {
    background-color: var(--c-surface);
    color: var(--c-on-surface);
    display: flex;
    flex-wrap: wrap;
    padding-bottom: theme('spacing.2');
    border-top: none;

    &__nav {
        @apply bg-success;
        margin-top: -2px;
        display: flex;
        align-items: center;
        padding: theme('spacing.2') theme('spacing.1');
        width: 100%;
        border-radius: 0.5rem;
    }

    &__nav-title {
        flex-grow: 1;
        text-align: center;
        text-transform: capitalize;
        font-weight: bold;
    }

    &__weekday,
    &__day {
        width: calc(100% / 7.001);
        padding: theme('spacing.2') theme('spacing.1');
        font-size: theme('fontSize.sm');
    }

    &__weekday {
        display: block;
        text-align: center;
        text-transform: capitalize;
        opacity: 0.8;
        margin-top: theme('spacing.2');
    }

    &__day {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &__day_today > span {
        background: rgba(var(--c-success-rgb, 88, 195, 68), 0.4);
    }

    &__day[disabled],
    &__day_outside {
        opacity: 0.4;
        pointer-events: none;
        cursor: default;
    }

    &__day > span {
        display: block;
        position: relative;
        width: theme('spacing.8');
        height: theme('spacing.8');
        text-align: center;
        line-height: 1.1428;
        padding-top: theme('spacing.2');
        padding-bottom: theme('spacing.2');
        border-radius: 50%;
    }

    &__day_active > span {
        @apply bg-success;
        font-weight: bold;
    }
}