.itemRow {
  gap: 0 !important;
}

/* List Item Styles - Clean list style matching design */
.listItem {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
  border: none;
  background-color: transparent;
}

.listItem:hover {
  background-color: var(--blue-3);
}

.removeButtonContainer {
  margin-top: var(--space-2);
}

.listItem:hover .arrowIcon {
  opacity: 1;
}

.listItem:focus {
  outline: 2px solid var(--blue-8);
  outline-offset: -2px;
}

.arrowIcon {
  position: absolute;
  right: var(--space-3);
  flex-shrink: 0;
  margin-top: 5px;
  transition: opacity 0.15s ease;
  opacity: 0;
  color: var(--gray-11);
}


.itemText {
  overflow: hidden;
  flex: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1C2024;
}

/* Popover Styles */
.popoverContent {
  display: flex;
  flex-direction: column;
  width: 235px;
  max-width: 235px;
  padding: 8px;
  transform: translateX(-30px);
  border: 1px solid var(--gray-6);
  border-radius: 4px;
  background-color: white;
  box-shadow: var(--shadow-4);
  gap: 4px;
}

.popoverHeader {
  margin-bottom: 0;
}

.popoverLabel {
  color: var(--gray-11);
}

.visuallyHiddenInput {
  position: absolute;
  left: -9999px;
}

.timeInputWrapper {
  margin-top: 8px;
}

/* Date and Time Input Styles - Move icons to the left */
.popoverContent input[type="date"],
.popoverContent input[type="time"] {
  position: relative;
  padding-left: 30px;
  text-indent: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 16px 16px;
}

/* Position the calendar/clock picker indicator on the left side */
/* stylelint-disable-next-line property-no-vendor-prefix */
.popoverContent input[type="date"]::-webkit-calendar-picker-indicator,
.popoverContent input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  z-index: 2;
  right: auto;
  left: 4px;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

/* Custom calendar icon */
.popoverContent input[type="date"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* Custom clock icon */
.popoverContent input[type="time"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}
