.Sui-Calendar{
    --sui-calendar-width: 297px;
    --sui-calendar-font: 0.75rem;
    @apply w-full md:w-[var(--sui-calendar-width)] md:min-w-[var(--sui-calendar-width)] py-1;

    &__Toolbar{
        @apply flex items-center space-x-1.5 /*border border-gray-300 dark:border-gray-700 rounded-md*/ px-2 py-1.5;
    }
    &__ToolbarInner{
        @apply flex flex-1 items-center justify-center space-x-1.5;
    }
    &__Inner{
        @apply px-0.5 sm:px-2 mt-0.5/* min-h-[285px]*/;
    }

    &__Months{
        @apply w-full grid grid-cols-3 gap-2 mt-2;
    }
    &__Years{
        @apply w-full grid grid-cols-3 gap-2 mt-2;
    }
    &__Week{
        @apply grid grid-cols-7 border-b border-gray-100 dark:border-gray-700 py-1;
        font-size: var(--sui-calendar-font);
        >div{
            @apply tracking-wide text-gray-500 text-center;
        }
    }
    &__Days{
        @apply grid grid-cols-7 gap-y-0.5 my-1 text-center;
        >*{
            @apply tracking-wide text-center;
        }
        &Out{
            @apply opacity-60;
        }
    }

    &--slim{
        @apply text-[0.625rem];
        --sui-calendar-width: 257px;
        --sui-calendar-font: 0.625rem;
    }
    &--normal{
        @apply text-xs;
        --sui-calendar-width: 297px;
        --sui-calendar-font: 0.75rem;
    }
    &--large{
        @apply text-sm;
        --sui-calendar-width: 337px;
        --sui-calendar-font: 0.875rem;
    }
}