$minicalendar-day-color: $black !default;
$minicalendar-day-color-on-dark-background: $white !default;
$minicalendar-fontsize: 1.2rem !default;
$minicalendar-cell-size: 2em !default;
$minicalendar-bg-color-range-selection: #51555F !default;

.minicalendar {
    font-size: $minicalendar-fontsize;
}

.minicalendar-grid--displayWeekNumber {
    display: grid;
    grid-template-columns: 30px auto;
    grid-template-rows: auto;
}

.minicalendar-weekdays,
.minicalendar-weeknumbers,
.minicalendar-day--inactive-month {
    opacity: .4;
}

.minicalendar-weekdays {
    display: grid;
    grid-template-columns: repeat( var(--minicalendar-weekdays-numberOfDaysInWeek, 7), 1fr);
    grid-template-rows: 1fr;
}
.minicalendar-days {
    display: grid;
    grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr);
    grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr);
    grid-gap: 1px 0px;
}

.minicalendar-day {
    color: var(--color-main-area, $minicalendar-day-color);
}
.minicalendar-days {
    user-select: none;
}

.minicalendar-weekdays {
    border-bottom: 1px dotted $pm-global-border;
}

.minicalendar-weeknumbers > span {

    &:first-of-type {
        border-bottom: 1px dotted $pm-global-border;
    }
    &:not(:first-of-type) {
        min-height: $minicalendar-cell-size;
    }

}
.minicalendar-weeknumbers-heading {
    display: inline-block;
    transform: scale(.7);
}

.minicalendar-day {
    position: relative;
    min-width: #{$minicalendar-cell-size + 0.35em};
    min-height: #{$minicalendar-cell-size + 0.35em};
    border-radius: 50%;
    &:focus,
    &:hover {
        background: rgba($minicalendar-bg-color-range-selection, .25);
    }
}

.minicalendar-grid--displayWeekNumber .minicalendar-day {
    min-width: $minicalendar-cell-size;
    min-height: $minicalendar-cell-size;
}

.minicalendar-day[aria-current="date"]::before {
    content: attr(data-current-day);
    speak: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-weight: bold;
    line-height: 2.3;  // check modifier below when no week displayed
    color: $white;
    background: $calendar-today-color;
    border-radius: 50%;
}
.minicalendar-day[aria-current="date"][aria-pressed=true]::before {
    background: $calendar-selected-day-color;
}
// fix in case of range selection in responsive view
$mini-calendar-currentDay-size: 2.5em !default;
.minicalendar-day--range.minicalendar-day[aria-current="date"]::before {
    left: calc(50% - #{$mini-calendar-currentDay-size/2});
    max-width: $mini-calendar-currentDay-size;
}

.minicalendar-grid--displayWeekNumber .minicalendar-day {
    &[aria-current="date"]::before {
        line-height: 2;
    }
}

.minicalendar--onDarkBackground {
    .minicalendar-day {
        color: $minicalendar-day-color-on-dark-background;
        &:focus,
        &:hover {
            background: rgba($minicalendar-bg-color-range-selection, .8);
        }
    }
}

.minicalendar-day[aria-pressed=true] {
     color: $white;
     background: $calendar-selected-day-color;
     border-radius: 50%;
}

$minicalendar-day-marker-size: 3px !default;
.minicalendar-day--marker {
    position: absolute;
    bottom: 1px;
    left: calc(50% - #{$minicalendar-day-marker-size/2});
    height: $minicalendar-day-marker-size;
    width: $minicalendar-day-marker-size;
    background-color: $pm-primary;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.minicalendar-day[aria-pressed=true],
.minicalendar-day[aria-pressed=date] {
    .minicalendar-day--marker {
        background-color: $white;
    }
}

.minicalendar-day--range {
    width: 100%;
}

.minicalendar-day--range-bound {
    background: $pm-primary;
}

.minicalendar-day--range[aria-pressed=true],
.minicalendar-day--range[aria-pressed=true]:hover,
.minicalendar-day--range[aria-pressed=true]:focus {
    background: $minicalendar-bg-color-range-selection;
    border-radius: 0;
}

// ranges
.minicalendar {
    .minicalendar-day--range-bound-begin,
    .minicalendar-day--range-bound-begin:hover,
    .minicalendar-day--range-bound-begin:focus {
        border-top-left-radius: 40%;
        border-bottom-left-radius: 40%;
    }
    .minicalendar-day--range-bound-end,
    .minicalendar-day--range-bound-end:hover,
    .minicalendar-day--range-bound-end:focus  {
        border-top-right-radius: 40%;
        border-bottom-right-radius: 40%;
    }
    .minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end {
        border-radius: 50%;
    }
}