best-react-datepicker 0.2.0

package/dist/styles.css

@@ -0,0 +1,751 @@
+:root {
+  /* === Accent (change this one variable to theme everything) === */
+  --brdp-color-accent: #2563eb;
+  --brdp-color-accent-light: #dbeafe;
+  --brdp-color-accent-dark: #1d4ed8;
+
+  /* === Backgrounds === */
+  --brdp-color-bg: #ffffff;
+  --brdp-color-bg-hover: #f3f4f6;
+  --brdp-color-bg-disabled: #f9fafb;
+  --brdp-color-bg-selected: var(--brdp-color-accent);
+  --brdp-color-bg-selected-hover: var(--brdp-color-accent-dark);
+  --brdp-color-bg-range: var(--brdp-color-accent-light);
+  --brdp-color-bg-range-hover: #bfdbfe;
+  --brdp-color-bg-today: #eff6ff;
+  --brdp-color-bg-highlighted: #fef3c7;
+  --brdp-color-bg-popover: #ffffff;
+  --brdp-color-bg-preset-hover: #f3f4f6;
+  --brdp-color-bg-preset-active: #eff6ff;
+  --brdp-color-bg-time-option-hover: #f3f4f6;
+  --brdp-color-bg-time-option-active: var(--brdp-color-accent);
+
+  /* === Text === */
+  --brdp-color-text: #111827;
+  --brdp-color-text-muted: #6b7280;
+  --brdp-color-text-disabled: #d1d5db;
+  --brdp-color-text-selected: #ffffff;
+  --brdp-color-text-outside: #d1d5db;
+  --brdp-color-text-today: var(--brdp-color-accent);
+  --brdp-color-text-range: #1e40af;
+  --brdp-color-text-weekend: inherit;
+  --brdp-color-text-week-number: #9ca3af;
+  --brdp-color-text-header: #111827;
+  --brdp-color-text-placeholder: #9ca3af;
+  --brdp-color-text-time-active: #ffffff;
+
+  /* === Borders === */
+  --brdp-color-border: #e5e7eb;
+  --brdp-color-border-input: #d1d5db;
+  --brdp-color-border-input-focus: var(--brdp-color-accent);
+  --brdp-color-border-today: var(--brdp-color-accent);
+  --brdp-color-border-popover: #e5e7eb;
+
+  /* === Sizing === */
+  --brdp-cell-size: 40px;
+  --brdp-header-height: 48px;
+  --brdp-input-height: 40px;
+  --brdp-time-column-width: 60px;
+  --brdp-time-column-height: 200px;
+  --brdp-preset-width: 160px;
+
+  /* === Spacing === */
+  --brdp-spacing-xs: 4px;
+  --brdp-spacing-sm: 8px;
+  --brdp-spacing-md: 12px;
+  --brdp-spacing-lg: 16px;
+  --brdp-spacing-xl: 24px;
+  --brdp-cell-gap: 2px;
+
+  /* === Typography === */
+  --brdp-font-family: inherit;
+  --brdp-font-size: 14px;
+  --brdp-font-size-sm: 12px;
+  --brdp-font-size-lg: 16px;
+  --brdp-font-weight-normal: 400;
+  --brdp-font-weight-medium: 500;
+  --brdp-font-weight-bold: 600;
+
+  /* === Border Radius === */
+  --brdp-radius-sm: 4px;
+  --brdp-radius-md: 6px;
+  --brdp-radius-lg: 8px;
+  --brdp-radius-xl: 12px;
+  --brdp-radius-full: 9999px;
+  --brdp-radius-day: var(--brdp-radius-full);
+  --brdp-radius-input: var(--brdp-radius-md);
+  --brdp-radius-popover: var(--brdp-radius-xl);
+
+  /* === Shadows === */
+  --brdp-shadow-popover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --brdp-shadow-input-focus: 0 0 0 3px rgb(37 99 235 / 0.1);
+
+  /* === Transitions === */
+  --brdp-transition-duration: 150ms;
+  --brdp-transition-timing: ease-in-out;
+
+  /* === Z-Index === */
+  --brdp-z-popover: 1000;
+  --brdp-z-portal: 1100;
+}
+
+/* === Dark Mode === */
+[data-brdp-theme="dark"],
+.brdp-dark {
+  --brdp-color-bg: #1f2937;
+  --brdp-color-bg-hover: #374151;
+  --brdp-color-bg-disabled: #1f2937;
+  --brdp-color-bg-selected: #3b82f6;
+  --brdp-color-bg-selected-hover: #2563eb;
+  --brdp-color-bg-range: #1e3a5f;
+  --brdp-color-bg-range-hover: #1e40af;
+  --brdp-color-bg-today: #1e3a5f;
+  --brdp-color-bg-highlighted: #78350f;
+  --brdp-color-bg-popover: #1f2937;
+  --brdp-color-bg-preset-hover: #374151;
+  --brdp-color-bg-preset-active: #1e3a5f;
+  --brdp-color-bg-time-option-hover: #374151;
+
+  --brdp-color-text: #f9fafb;
+  --brdp-color-text-muted: #9ca3af;
+  --brdp-color-text-disabled: #4b5563;
+  --brdp-color-text-outside: #4b5563;
+  --brdp-color-text-today: #60a5fa;
+  --brdp-color-text-header: #f9fafb;
+  --brdp-color-text-placeholder: #6b7280;
+
+  --brdp-color-border: #374151;
+  --brdp-color-border-input: #4b5563;
+  --brdp-color-border-input-focus: #3b82f6;
+  --brdp-color-border-popover: #374151;
+
+  --brdp-shadow-popover: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+
+/* === Global scrollbar hide === */
+.brdp-root *,
+.brdp-popover * {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.brdp-root *::-webkit-scrollbar,
+.brdp-popover *::-webkit-scrollbar {
+  display: none;
+}
+
+/* === Root container === */
+.brdp-root {
+  position: relative;
+  display: inline-block;
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  color: var(--brdp-color-text);
+}
+
+/* === Input === */
+.brdp-input {
+  height: var(--brdp-input-height);
+  padding: var(--brdp-spacing-sm) var(--brdp-spacing-md);
+  border: 1px solid var(--brdp-color-border-input);
+  border-radius: var(--brdp-radius-input);
+  background: var(--brdp-color-bg);
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  outline: none;
+  transition: border-color var(--brdp-transition-duration) var(--brdp-transition-timing),
+              box-shadow var(--brdp-transition-duration) var(--brdp-transition-timing);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.brdp-input::placeholder {
+  color: var(--brdp-color-text-placeholder);
+}
+
+.brdp-input:focus {
+  border-color: var(--brdp-color-border-input-focus);
+  box-shadow: var(--brdp-shadow-input-focus);
+}
+
+.brdp-input:disabled {
+  background: var(--brdp-color-bg-disabled);
+  color: var(--brdp-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* === Range Input === */
+.brdp-range-input {
+  display: flex;
+  align-items: center;
+  gap: var(--brdp-spacing-sm);
+}
+
+.brdp-range-input__start,
+.brdp-range-input__end {
+  flex: 1;
+  min-width: 0;
+}
+
+.brdp-range-input__separator {
+  color: var(--brdp-color-text-muted);
+  flex-shrink: 0;
+}
+
+/* === Footer === */
+.brdp-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--brdp-spacing-sm);
+  padding: var(--brdp-spacing-sm) var(--brdp-spacing-md);
+  border-top: 1px solid var(--brdp-color-border);
+}
+
+.brdp-footer__btn {
+  padding: var(--brdp-spacing-xs) var(--brdp-spacing-md);
+  border: none;
+  border-radius: var(--brdp-radius-sm);
+  background: none;
+  color: var(--brdp-color-accent);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size-sm);
+  font-weight: var(--brdp-font-weight-medium);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing);
+}
+
+.brdp-footer__btn:hover {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-footer__btn--apply {
+  background: var(--brdp-color-accent);
+  color: var(--brdp-color-text-selected);
+  border-radius: var(--brdp-radius-md);
+}
+
+.brdp-footer__btn--apply:hover {
+  background: var(--brdp-color-accent-dark);
+}
+
+/* === Popover === */
+.brdp-popover {
+  background: var(--brdp-color-bg-popover);
+  border: 1px solid var(--brdp-color-border-popover);
+  border-radius: var(--brdp-radius-popover);
+  box-shadow: var(--brdp-shadow-popover);
+  overflow: hidden;
+}
+
+/* === Range Popover Layout === */
+.brdp-range-popover {
+  display: flex;
+}
+
+/* === DateTime Layout === */
+.brdp-datetime {
+  display: flex;
+  flex-direction: column;
+}
+
+.brdp-datetime__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--brdp-color-border);
+}
+
+.brdp-datetime__tab {
+  flex: 1;
+  padding: var(--brdp-spacing-sm) var(--brdp-spacing-md);
+  border: none;
+  background: none;
+  color: var(--brdp-color-text-muted);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size-sm);
+  font-weight: var(--brdp-font-weight-medium);
+  cursor: pointer;
+  transition: color var(--brdp-transition-duration) var(--brdp-transition-timing),
+              border-color var(--brdp-transition-duration) var(--brdp-transition-timing);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.brdp-datetime__tab--active {
+  color: var(--brdp-color-accent);
+  border-bottom-color: var(--brdp-color-accent);
+}
+
+.brdp-datetime__tab:hover {
+  color: var(--brdp-color-text);
+}
+
+/* === Calendar Header === */
+.brdp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--brdp-header-height);
+  padding: 0 var(--brdp-spacing-sm);
+}
+
+.brdp-header__label {
+  font-size: var(--brdp-font-size);
+  font-weight: var(--brdp-font-weight-bold);
+  color: var(--brdp-color-text-header);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--brdp-spacing-xs) var(--brdp-spacing-sm);
+  border-radius: var(--brdp-radius-sm);
+  font-family: var(--brdp-font-family);
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing);
+}
+
+.brdp-header__label:hover {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-header__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--brdp-radius-full);
+  background: none;
+  color: var(--brdp-color-text-muted);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
+              color var(--brdp-transition-duration) var(--brdp-transition-timing);
+}
+
+.brdp-header__nav-btn:hover {
+  background: var(--brdp-color-bg-hover);
+  color: var(--brdp-color-text);
+}
+
+.brdp-header__nav-btn:disabled {
+  color: var(--brdp-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* === Month/Year Dropdowns === */
+.brdp-header__selects {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.brdp-header__select-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.brdp-header__select {
+  font-size: var(--brdp-font-size);
+  font-weight: var(--brdp-font-weight-bold);
+  font-family: var(--brdp-font-family);
+  color: var(--brdp-color-text-header);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--brdp-radius-md);
+  padding: 4px 20px 4px 8px;
+  cursor: pointer;
+  outline: none;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
+              border-color var(--brdp-transition-duration) var(--brdp-transition-timing);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  line-height: 1.4;
+}
+
+.brdp-header__select:hover {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-header__select:focus {
+  border-color: var(--brdp-color-accent);
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-header__select-chevron {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--brdp-color-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+/* === Calendar === */
+.brdp-calendar {
+  padding: var(--brdp-spacing-md);
+}
+
+.brdp-calendar__months {
+  display: flex;
+  gap: var(--brdp-spacing-lg);
+}
+
+.brdp-calendar__month {
+  min-width: calc(var(--brdp-cell-size) * 7 + var(--brdp-cell-gap) * 6);
+}
+
+/* === Grid === */
+.brdp-grid {
+  border-collapse: separate;
+  border-spacing: var(--brdp-cell-gap);
+}
+
+.brdp-grid__weekdays {
+  height: var(--brdp-cell-size);
+}
+
+.brdp-grid__weekday {
+  width: var(--brdp-cell-size);
+  font-size: var(--brdp-font-size-sm);
+  font-weight: var(--brdp-font-weight-medium);
+  color: var(--brdp-color-text-muted);
+  text-align: center;
+  padding: 0;
+}
+
+.brdp-grid__week {
+  height: var(--brdp-cell-size);
+}
+
+/* === Week Number === */
+.brdp-week-number {
+  width: var(--brdp-cell-size);
+  font-size: var(--brdp-font-size-sm);
+  color: var(--brdp-color-text-week-number);
+  text-align: center;
+  padding: 0;
+}
+
+.brdp-week-number--header {
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+/* === Day Cell === */
+.brdp-day {
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.brdp-day--empty {
+  pointer-events: none;
+}
+
+.brdp-day__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--brdp-cell-size);
+  height: var(--brdp-cell-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--brdp-radius-day);
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  font-weight: var(--brdp-font-weight-normal);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing),
+              color var(--brdp-transition-duration) var(--brdp-transition-timing),
+              box-shadow var(--brdp-transition-duration) var(--brdp-transition-timing);
+  outline: none;
+  position: relative;
+}
+
+.brdp-day__btn:hover:not(:disabled) {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-day__btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--brdp-color-accent);
+}
+
+/* === States === */
+.brdp-day--today .brdp-day__btn {
+  background: var(--brdp-color-bg-today);
+  color: var(--brdp-color-text-today);
+  font-weight: var(--brdp-font-weight-bold);
+}
+
+.brdp-day--selected .brdp-day__btn {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+.brdp-day--selected .brdp-day__btn:hover {
+  background: var(--brdp-color-bg-selected-hover);
+}
+
+.brdp-day--disabled .brdp-day__btn {
+  color: var(--brdp-color-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.brdp-day--outside .brdp-day__btn {
+  color: var(--brdp-color-text-outside);
+}
+
+.brdp-day--weekend .brdp-day__btn {
+  color: var(--brdp-color-text-weekend);
+}
+
+.brdp-day--highlighted .brdp-day__btn {
+  background: var(--brdp-color-bg-highlighted);
+}
+
+.brdp-day--focused .brdp-day__btn {
+  box-shadow: 0 0 0 2px var(--brdp-color-accent);
+}
+
+/* === Range Selection === */
+.brdp-day--range-start .brdp-day__btn {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  border-radius: var(--brdp-radius-day) 0 0 var(--brdp-radius-day);
+}
+
+.brdp-day--range-end .brdp-day__btn {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  border-radius: 0 var(--brdp-radius-day) var(--brdp-radius-day) 0;
+}
+
+.brdp-day--range-start.brdp-day--range-end .brdp-day__btn {
+  border-radius: var(--brdp-radius-day);
+}
+
+.brdp-day--range-middle .brdp-day__btn {
+  background: var(--brdp-color-bg-range);
+  color: var(--brdp-color-text-range);
+  border-radius: 0;
+}
+
+.brdp-day--range-middle .brdp-day__btn:hover {
+  background: var(--brdp-color-bg-range-hover);
+}
+
+.brdp-day--range-preview .brdp-day__btn {
+  background: var(--brdp-color-bg-range);
+  border-radius: 0;
+  opacity: 0.6;
+}
+
+/* === Time Picker === */
+.brdp-time {
+  display: flex;
+  gap: var(--brdp-spacing-xs);
+  padding: var(--brdp-spacing-md);
+}
+
+.brdp-time__column {
+  width: var(--brdp-time-column-width);
+  max-height: var(--brdp-time-column-height);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--brdp-spacing-xs);
+  scroll-behavior: smooth;
+}
+
+.brdp-time__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--brdp-spacing-xs) var(--brdp-spacing-sm);
+  border: none;
+  border-radius: var(--brdp-radius-sm);
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing);
+  min-height: 32px;
+  flex-shrink: 0;
+}
+
+.brdp-time__option:hover {
+  background: var(--brdp-color-bg-time-option-hover);
+}
+
+.brdp-time__option--active {
+  background: var(--brdp-color-bg-time-option-active);
+  color: var(--brdp-color-text-time-active);
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+.brdp-time__option--active:hover {
+  background: var(--brdp-color-bg-selected-hover);
+}
+
+/* === Month Grid === */
+.brdp-month-picker,
+.brdp-year-picker {
+  padding: var(--brdp-spacing-md);
+}
+
+.brdp-month-grid,
+.brdp-year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--brdp-spacing-sm);
+  padding: var(--brdp-spacing-sm) 0;
+}
+
+.brdp-year-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.brdp-month-grid__cell,
+.brdp-year-grid__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--brdp-spacing-sm) var(--brdp-spacing-md);
+  border: none;
+  border-radius: var(--brdp-radius-md);
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size);
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing);
+  min-height: 40px;
+}
+
+.brdp-month-grid__cell:hover,
+.brdp-year-grid__cell:hover {
+  background: var(--brdp-color-bg-hover);
+}
+
+.brdp-month-grid__cell--selected,
+.brdp-year-grid__cell--selected {
+  background: var(--brdp-color-bg-selected);
+  color: var(--brdp-color-text-selected);
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+.brdp-month-grid__cell--selected:hover,
+.brdp-year-grid__cell--selected:hover {
+  background: var(--brdp-color-bg-selected-hover);
+}
+
+.brdp-month-grid__cell--disabled,
+.brdp-year-grid__cell--disabled {
+  color: var(--brdp-color-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.brdp-year-grid__cell--current {
+  color: var(--brdp-color-text-today);
+  font-weight: var(--brdp-font-weight-bold);
+}
+
+/* === Presets Sidebar === */
+.brdp-presets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--brdp-spacing-xs);
+  padding: var(--brdp-spacing-md);
+  border-right: 1px solid var(--brdp-color-border);
+  min-width: var(--brdp-preset-width);
+}
+
+.brdp-presets__item {
+  padding: var(--brdp-spacing-sm) var(--brdp-spacing-md);
+  border: none;
+  border-radius: var(--brdp-radius-sm);
+  background: transparent;
+  color: var(--brdp-color-text);
+  font-family: var(--brdp-font-family);
+  font-size: var(--brdp-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--brdp-transition-duration) var(--brdp-transition-timing);
+  white-space: nowrap;
+}
+
+.brdp-presets__item:hover {
+  background: var(--brdp-color-bg-preset-hover);
+}
+
+.brdp-presets__item--active {
+  background: var(--brdp-color-bg-preset-active);
+  color: var(--brdp-color-accent);
+  font-weight: var(--brdp-font-weight-medium);
+}
+
+/* === Presets Bottom (compact mode) === */
+.brdp-presets--bottom {
+  flex-direction: row;
+  flex-wrap: wrap;
+  border-right: none;
+  border-top: 1px solid var(--brdp-color-border);
+  min-width: 0;
+}
+
+/* === Optional Animations === */
+@keyframes brdp-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes brdp-fade-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}
+
+@keyframes brdp-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.brdp-popover {
+  animation: brdp-fade-in var(--brdp-transition-duration) var(--brdp-transition-timing);
+}
+
+/* Slide transition for month change */
+@keyframes brdp-slide-left {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes brdp-slide-right {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* === RTL Support === */
+[dir="rtl"] .brdp-day--range-start .brdp-day__btn {
+  border-radius: 0 var(--brdp-radius-day) var(--brdp-radius-day) 0;
+}
+
+[dir="rtl"] .brdp-day--range-end .brdp-day__btn {
+  border-radius: var(--brdp-radius-day) 0 0 var(--brdp-radius-day);
+}
+
+[dir="rtl"] .brdp-day--range-start.brdp-day--range-end .brdp-day__btn {
+  border-radius: var(--brdp-radius-day);
+}
+
+[dir="rtl"] .brdp-presets {
+  border-right: none;
+  border-left: 1px solid var(--brdp-color-border);
+}