.datepicker-date-display {
    background-color: var(--color-blue);
}

.datepicker-table td.is-selected {
    background-color: var(--color-blue);
}

.datepicker-day-button:focus {
    background-color: rgba(46, 121, 185, 0.3);
}

.datepicker-cancel, .datepicker-done, .datepicker-clear {
    color: var(--color-blue);
    font-weight: bold;
}

.datepicker-cancel:hover, .datepicker-done:hover, .datepicker-clear:hover {
    background-color: rgba(46, 121, 185, 0.2);
    color: var(--color-blue);
    font-weight: bold;
}

.datepicker-calendar .month-next:hover, .datepicker-calendar .month-prev:hover {
    background-color: rgba(46, 121, 185, 0.3);
}

.datepicker-table td.is-today {
    color: var(--color-blue);
}

.datepicker-table td.is-today .datepicker-day-button{
    font-weight: bold;
}

.datepicker-table td.is-selected .datepicker-day-button {
    color: var(--color-white);
}

/* dark theme */
[data-theme="dark"] .datepicker-calendar-container {
    background-color: #333333;
}

[data-theme="dark"] .datepicker-row {
    color: var(--color-white);
}

[data-theme="dark"] .datepicker-controls .select-wrapper input {
    color: var(--color-white);
}

[data-theme="dark"]  .month-next svg, .month-prev svg {
    fill: var(--color-white);
}