.sxs-dpckr {
    .react-datepicker {
        overflow: hidden;
        display: inline-block;
        position: relative;
        line-height: initial;
        width: 100%;
        height: 100%;
        font-size: $text-15;
        padding: 1rem 1.75rem;
        border: 1px solid $primaryClear;
        border-radius: 2rem;

        &__aria-live {
            position: absolute;
            clip-path: circle(0);
            border: 0;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            width: 1px;
            white-space: nowrap;
        }

        &__header {
            text-align: center;

            &-btn {
                &--disabled {
                    opacity: 0;
                    pointer-events: none;
                }
            }

            &--main {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 1rem;
                font-size: $text-body;
                font-weight: 700;
                text-transform: uppercase;

                .icon {
                    font-size: .75em;
                    color: $primaryClear;
                }
            }
        }

        &__day-names {
            display: flex;
            justify-content: space-between;
            white-space: nowrap;
        }

        &__day-name {
            font-weight: 700;
        }

        &__day-name,
        &__day,
        &__time-name {
            --_s: 2em;
            display: inline-block;
            width: var(--_s);
            border-radius: 50%;
            line-height: var(--_s);
            text-align: center;
        }

        &__day {
            &--disabled:not(.react-datepicker__day--outside-month) {
                opacity: .25;
            }

            &--outside-month {
                opacity: 0;
            }
        }

        &__month {
            text-align: center;
        }

        &__week {
            display: flex;
            justify-content: space-between;
            white-space: nowrap;
        }

        &__day,
        &__month-text,
        &__quarter-text,
        &__year-text {
            cursor: pointer;
        }

        &__day:not([aria-disabled=true]):hover,
        &__month-text:not([aria-disabled=true]):hover,
        &__quarter-text:not([aria-disabled=true]):hover,
        &__year-text:not([aria-disabled=true]):hover {
            background-color: $accentClear2;
        }

        &__day--keyboard-selected,
        &__month-text--keyboard-selected,
        &__quarter-text--keyboard-selected,
        &__year-text--keyboard-selected {
            background-color: $primaryClear;
        }

        &__day--keyboard-selected:not([aria-disabled=true]):hover,
        &__month-text--keyboard-selected:not([aria-disabled=true]):hover,
        &__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
        &__year-text--keyboard-selected:not([aria-disabled=true]):hover {
            background-color: $primaryClear;
        }

        &__current-month,
        &-time__header,
        &-year-header {
            margin-top: 0;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
        }
    }
}