.calendar__wrapper {
    position: relative;
}

.calendar__trigger {
    width: fit-content;
}

.calendar__popover {
    box-sizing: border-box;
    width: 244px;

    position: absolute;
    z-index: 25;

    background: var(--bg-main-color-light);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
}

.calendar__header .button-icon {
    width: 26px;
    height: 26px;
}

.calendar__control {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 4px;
}

.calendar__month {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main-color-light);
}

.calendar__separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.calendar__table {
    width: 100%;
    border-spacing: 0;
    color: var(--text-main-color-light);
    padding: 8px 10px;
}

.calendar__table th {
    width: 32px;
    height: 24px;

    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

.calendar__table td {
    width: 32px;
    height: 32px;

    text-align: center;
    font-size: 13px;
    border-radius: var(--border-radius-md);
    background: var(--bg-main-color-light);
    /*transition: background-color 100ms ease-in-out;*/
    cursor: pointer;
}

.calendar__table td.empty {
    cursor: default;
}

.calendar__table td:not(.current):not(.range-start):not(.range-end).today {
    color: var(--text-accent-color);
}

.calendar__table td.current {
    background: var(--bg-accent-color);
    color: var(--text-dark-color);
}

.calendar__table td:not(.empty):not(.range-start):not(.range-end):not(.current):hover {
    color: var(--text-accent-color);
    border: 1px var(--bg-accent-color) solid;
}

.calendar__wrapper .icon--arrow {
    background-image: var(--icon-arrow-accent);
    height: 10px;
    width: 10px;
    transform: rotate(90deg);
}
.calendar__wrapper .icon--arrow.reverse {
    transform: rotate(-90deg);
}
.calendar__wrapper .icon--clock {
    background-image: var(--icon-reset-clock-accent);
    height: 16px;
    width: 16px;
}
.calendar__table td.range-start {
    background: var(--bg-accent-color);
    color: var(--text-dark-color) !important;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.calendar__table td.range-single {
    border-radius: var(--border-radius-md);
}

.calendar__table td.range-end {
    background: var(--bg-accent-color);
    color: var(--text-dark-color) !important;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.calendar__table td.range-in {
    /*background: color-mix(in srgb, var(--bg-accent-color) 18%, transparent);*/
    background: #9e9e9e6e;
    color: var(--text-main-color-light);
    border-radius: 0;
}

.calendar__table td.range-start:hover,
.calendar__table td.range-end:hover,
.calendar__table td.range-in:hover {
    border: none;
    color: inherit;
}

.calendar__table tr td.range-start:first-child {
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.calendar__table tr td.range-end:last-child {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.calendar__table td.range-start.range-end {
    border-radius: var(--border-radius-md);
}

.calendar__table td.range-start.range-end {
    border-radius: var(--border-radius-md);
}

.calendar__table td.not-available,
.calendar__table td.not-available:hover {
    color: #9e9e9e;
    font-style: italic;
    cursor: default;
    border: none;
}

.calendar__nav-btn:disabled {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
}