@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/inputComponents/Dropdown.module.css

@@ -1,796 +0,0 @@
-.bik-dropdown__container {
-  /* Colors */
-  --bik-dropdown-border-color: #e0e0e0;
-  --bik-dropdown-text-color: #1f2937;
-  --bik-dropdown-placeholder-color: #fff;
-  --bik-dropdown-background: rgba(255, 255, 255, 0.3);
-  --bik-dropdown-focus-color: var(--bik-focus-color, #e0e0e0);
-
-  --bik-dropdown-secondary-color: #6b7280;
-  --bik-dropdown-muted-color: #9ca3af;
-  --bik-dropdown-light-border: rgba(224, 224, 224, 0.4);
-  --bik-dropdown-selected-bg: rgba(255, 255, 255, 0.4);
-
-  --bik-dropdown-error-color: #b92321;
-  --bik-dropdown-error-highlight: #ef4444;
-  --bik-dropdown-option-bg-light: #f9fafb;
-  --bik-dropdown-option-bg-hover: #f3f4f6;
-  --bik-dropdown-option-border: #e5e7eb;
-  --bik-dropdown-input-border: #d1d5db;
-  --bik-dropdown-scrollbar-track: #f1f1f1;
-
-  /* Sizing */
-  --bik-dropdown-min-height-desktop: 56px;
-  --bik-dropdown-min-height-mobile: 48px;
-  --bik-dropdown-min-height-preview: 20px;
-  --bik-dropdown-border-radius: 8px;
-
-  /* Spacing */
-  --bik-dropdown-padding-desktop: 6px 18px;
-  --bik-dropdown-padding-mobile: 6px 14px 2px;
-  --bik-dropdown-padding-preview: 2px;
-  --bik-dropdown-label-padding-desktop: 18px;
-  --bik-dropdown-label-padding-mobile: 14px;
-  --bik-dropdown-label-padding-preview: 2px;
-
-  /* Typography */
-  --bik-dropdown-font-size-base: 14px;
-  --bik-dropdown-font-size-label: 11px;
-  --bik-dropdown-font-size-small: 12px;
-  --bik-dropdown-font-size-tiny: 10px;
-  --bik-dropdown-font-size-search: 14px;
-  --bik-dropdown-font-weight-normal: 400;
-  --bik-dropdown-font-weight-medium: 500;
-  --bik-dropdown-font-weight-semibold: 600;
-
-  /* Effects */
-  --bik-dropdown-backdrop-filter: blur(4px);
-  --bik-dropdown-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --bik-dropdown-box-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.03);
-  --bik-dropdown-box-shadow-focus: 0 1px 3px
-    color-mix(in srgb, var(--bik-dropdown-focus-color) 6%, transparent);
-  --bik-dropdown-box-shadow-error: 0 1px 3px rgba(185, 35, 33, 0.06);
-  --bik-dropdown-box-shadow-error-hover: 0 1px 4px rgba(185, 35, 33, 0.08);
-}
-
-/* BASE CONTAINER */
-
-.bik-dropdown__container {
-  position: relative;
-  margin: 8px 0;
-  width: 100%;
-}
-
-/* INPUT WRAPPER & STATES */
-
-.bik-dropdown__inputWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: var(--bik-dropdown-min-height-desktop);
-  background: var(--bik-dropdown-background);
-  border: 1px solid var(--bik-dropdown-border-color);
-  border-radius: var(--bik-dropdown-border-radius);
-  cursor: pointer;
-  overflow: visible;
-  transition: var(--bik-dropdown-transition);
-}
-
-.bik-dropdown__inputWrapper::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.bik-dropdown__inputWrapper:hover {
-  box-shadow: var(--bik-dropdown-box-shadow-hover);
-}
-
-/* Input wrapper states */
-.bik-dropdown__inputWrapper--focused {
-  box-shadow: var(--bik-dropdown-box-shadow-focus);
-}
-
-.bik-dropdown__inputWrapper--open {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.bik-dropdown__inputWrapper--error {
-  border-color: var(--bik-dropdown-error-color);
-  box-shadow: var(--bik-dropdown-box-shadow-error);
-}
-
-.bik-dropdown__inputWrapper--error:hover,
-.bik-dropdown__inputWrapper--error.bik-dropdown__inputWrapper--focused {
-  box-shadow: var(--bik-dropdown-box-shadow-error-hover);
-}
-
-.bik-dropdown__inputWrapper--disabled {
-  background: var(--bik-dropdown-background);
-  border-color: var(--bik-dropdown-border-color);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.bik-dropdown__inputWrapper--disabled:hover {
-  box-shadow: none;
-  transform: none;
-}
-
-/* INPUT ELEMENTS */
-
-.bik-dropdown__input {
-  flex: 1;
-  min-height: 24px;
-  padding: var(--bik-dropdown-padding-desktop);
-  margin-left: 4px;
-  font-size: var(--bik-dropdown-font-size-base);
-  font-weight: var(--bik-dropdown-font-weight-normal);
-  line-height: 1.5;
-  color: var(--bik-dropdown-text-color);
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  transition: all 0.2s ease;
-}
-
-.bik-dropdown__searchContainer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-}
-
-.bik-dropdown__search {
-  flex: 1;
-  min-width: 120px;
-  padding: 0 !important;
-  font-size: var(--bik-dropdown-font-size-base) !important;
-  color: inherit;
-  background: transparent !important;
-  border: none;
-  outline: none;
-}
-
-.bik-dropdown__search::placeholder {
-  color: var(--bik-dropdown-placeholder-color);
-  opacity: 0.7;
-}
-
-.bik-dropdown__inputWrapper:not(.bik-dropdown__inputWrapper--open)
-  .bik-dropdown__search::placeholder {
-  opacity: 0;
-}
-
-.bik-dropdown__placeholder {
-  color: var(--bik-dropdown-placeholder-color);
-  font-size: var(--bik-dropdown-font-size-base);
-  line-height: 1.5;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.bik-dropdown__inputWrapper--hasFloated .bik-dropdown__placeholder {
-  opacity: 1;
-}
-
-.bik-dropdown__value {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* SELECTED ITEM*/
-
-.bik-dropdown__selectedItems {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px;
-  flex: 1;
-  min-height: 24px;
-  margin-top: 16px;
-}
-
-.bik-dropdown__inputWrapper:not(.bik-dropdown__inputWrapper--hasValue):not(
-    .bik-dropdown__inputWrapper--focused
-  ):not(.bik-dropdown__inputWrapper--open):not(
-    .bik-dropdown__inputWrapper--hasSelectedItems
-  )
-  .bik-dropdown__selectedItems {
-  margin-top: 0;
-}
-
-.bik-dropdown__singleSelectedItem {
-  flex: 1;
-  color: inherit;
-  font-size: var(--bik-dropdown-font-size-base);
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bik-dropdown__selectedItem {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 150px;
-  padding: 1px 4px;
-  background: var(--bik-dropdown-selected-bg);
-  backdrop-filter: var(--bik-dropdown-backdrop-filter);
-  border: 1px solid rgba(224, 224, 224, 0.6);
-  border-radius: 6px;
-  font-size: var(--bik-dropdown-font-size-small);
-  font-weight: var(--bik-dropdown-font-weight-medium);
-  color: var(--bik-dropdown-text-color);
-  position: relative;
-  overflow: hidden;
-  transition: var(--bik-dropdown-transition);
-  animation: bik-slideInSelectedItem 0.2s ease-out;
-}
-
-.bik-dropdown__selectedItem::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.15));
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.bik-dropdown__selectedItemText {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bik-dropdown__selectedCount {
-  padding: 2px 4px;
-  background: var(--bik-dropdown-background);
-  backdrop-filter: var(--bik-dropdown-backdrop-filter);
-  border: 1px solid var(--bik-dropdown-light-border);
-  border-radius: 4px;
-  color: var(--bik-dropdown-secondary-color);
-  font-size: var(--bik-dropdown-font-size-tiny);
-  font-weight: var(--bik-dropdown-font-weight-medium);
-  white-space: nowrap;
-  transition: var(--bik-dropdown-transition);
-}
-
-/*BUTTONS */
-
-.bik-dropdown__button {
-  position: relative;
-  border: none;
-  cursor: pointer;
-  backdrop-filter: blur(2px);
-  transition: var(--bik-dropdown-transition);
-}
-
-.bik-dropdown__button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.bik-dropdown__removeButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px !important;
-  height: 16px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: var(--bik-dropdown-background) !important;
-  border: none;
-  border-radius: 50%;
-  color: var(--bik-dropdown-secondary-color);
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.bik-dropdown__removeButton:hover {
-  color: var(--bik-dropdown-error-color);
-}
-
-.bik-dropdown__clearButton {
-  padding: 4px 8px !important;
-  margin-left: 6px;
-  background: var(--bik-dropdown-background) !important;
-  backdrop-filter: var(--bik-dropdown-backdrop-filter);
-  border: 1px solid var(--bik-dropdown-light-border) !important;
-  border-radius: 4px;
-  color: var(--bik-dropdown-secondary-color) !important;
-  font-size: var(--bik-dropdown-font-size-tiny) !important;
-  font-weight: var(--bik-dropdown-font-weight-medium);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.bik-dropdown__clearButton:hover {
-  border-color: var(--bik-dropdown-error-color);
-  color: var(--bik-dropdown-error-color);
-}
-
-/* LABELS */
-
-.bik-dropdown__label {
-  position: absolute;
-  left: var(--bik-dropdown-label-padding-desktop);
-  top: 50%;
-  transform: translateY(-50%);
-  max-width: calc(100% - 60px);
-  padding: 0 4px;
-  background: transparent;
-  font-size: 14px;
-  font-weight: var(--bik-dropdown-font-weight-normal);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  pointer-events: none;
-  transition: var(--bik-dropdown-transition);
-  z-index: 2;
-}
-
-/* Label floating states - consolidated selector */
-.bik-dropdown__inputWrapper--open .bik-dropdown__label,
-.bik-dropdown__inputWrapper--focused .bik-dropdown__label,
-.bik-dropdown__inputWrapper--hasValue .bik-dropdown__label,
-.bik-dropdown__inputWrapper--hasSelectedItems .bik-dropdown__label,
-.bik-dropdown__label--floated,
-.bik-dropdown__label--hasValue,
-.bik-dropdown__label--hasPlaceholder,
-.bik-dropdown__label--hasSelectedItems {
-  top: 6px;
-  transform: translateY(0);
-  font-size: var(--bik-dropdown-font-size-label);
-  font-weight: var(--bik-dropdown-font-weight-normal);
-  color: var(--bik-dropdown-muted-color);
-  background: transparent;
-}
-
-.bik-dropdown__input:focus + .bik-dropdown__label,
-.bik-dropdown__inputWrapper--focused .bik-dropdown__label {
-  color: #4b5563;
-}
-
-/* Label state modifiers */
-.bik-dropdown__label--error {
-  color: var(--bik-dropdown-error-highlight) !important;
-}
-
-.bik-dropdown__label--disabled {
-  color: var(--bik-dropdown-placeholder-color) !important;
-  background: transparent;
-}
-
-.bik-dropdown__required {
-  margin-left: 2px;
-  color: var(--bik-dropdown-error-highlight);
-  font-weight: var(--bik-dropdown-font-weight-medium);
-}
-
-/* ICONS */
-
-.bik-dropdown__icon {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bik-dropdown-secondary-color);
-  pointer-events: none;
-  flex-shrink: 0;
-  z-index: 2;
-}
-
-.bik-dropdown__chevron {
-  transition: transform 0.2s ease;
-}
-
-.bik-dropdown__chevron--open {
-  transform: rotate(180deg);
-}
-
-.bik-dropdown__errorIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-}
-
-/* DROPDOWN OPTIONS */
-
-.bik-dropdown__options {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  max-height: 200px;
-  background: rgba(255, 255, 255);
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--bik-dropdown-border-color);
-  border-top: none;
-  border-bottom-left-radius: var(--bik-dropdown-border-radius);
-  border-bottom-right-radius: var(--bik-dropdown-border-radius);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  z-index: 1000;
-}
-
-.bik-dropdown__options--top {
-  bottom: 100%;
-  top: auto;
-  border-top: 1px solid var(--bik-dropdown-border-color);
-  border-bottom: none;
-  border-top-left-radius: var(--bik-dropdown-border-radius);
-  border-top-right-radius: var(--bik-dropdown-border-radius);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
-}
-
-/* Search functionality */
-.bik-dropdown__searchWrapper {
-  padding: 12px;
-  border-bottom: 1px solid var(--bik-dropdown-option-border);
-  background: var(--bik-dropdown-option-bg-light);
-}
-
-.bik-dropdown__searchInput {
-  width: 100% !important;
-  padding: 8px 12px !important;
-  border: 1px solid var(--bik-dropdown-input-border) !important;
-  border-radius: 4px;
-  font-size: var(--bik-dropdown-font-size-search) !important;
-  outline: none;
-  transition: border-color 0.2s ease;
-}
-
-.bik-dropdown__searchInput:focus {
-  border-color: #374151;
-}
-
-/* Select all functionality */
-.bik-dropdown__selectAllWrapper {
-  border-bottom: 1px solid var(--bik-dropdown-option-border);
-  background: var(--bik-dropdown-option-bg-light);
-}
-
-.bik-dropdown__selectAllOption {
-  background: var(--bik-dropdown-option-bg-light);
-  font-weight: var(--bik-dropdown-font-weight-medium);
-}
-
-.bik-dropdown__selectAllOption:hover {
-  background: var(--bik-dropdown-option-bg-hover);
-}
-
-.bik-dropdown__optionsList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-/* OPTIONS LIST ITEMS */
-
-.bik-dropdown__option {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  font-size: var(--bik-dropdown-font-size-base);
-  line-height: 1.5;
-  color: var(--bik-dropdown-text-color);
-  border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.bik-dropdown__option:last-child {
-  border-bottom: none;
-}
-
-.bik-dropdown__option:hover {
-  background: var(--bik-dropdown-option-bg-light);
-  color: var(--bik-dropdown-text-color);
-}
-
-.bik-dropdown__option--selected {
-  background: var(--bik-dropdown-option-bg-hover);
-  color: var(--bik-dropdown-text-color);
-}
-
-.bik-dropdown__option--selected:hover {
-  background: var(--bik-dropdown-option-border);
-}
-
-.bik-dropdown__option--disabled {
-  color: var(--bik-dropdown-placeholder-color);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.bik-dropdown__option--disabled:hover {
-  background: transparent;
-}
-
-.bik-dropdown__checkbox,
-.bik-dropdown__radio {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.bik-dropdown__optionLabel {
-  flex: 1;
-  min-width: 0;
-  word-wrap: break-word;
-}
-
-/* ERROR MESSAGES*/
-.bik-dropdown__error {
-  display: flex;
-  gap: 4px;
-  margin: 4px 0 0 6px;
-  color: var(--bik-dropdown-error-highlight);
-  font-size: var(--bik-dropdown-font-size-tiny);
-  font-weight: var(--bik-dropdown-font-weight-normal);
-  line-height: 1.4;
-  animation: bik-slideInError 0.3s ease;
-  z-index: 1;
-}
-
-/* ANIMATIONS */
-
-@keyframes bik-slideInSelectedItem {
-  from {
-    opacity: 0;
-    transform: translateX(-8px) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}
-
-@keyframes bik-slideInError {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* SCROLLBAR STYLING */
-
-.bik-dropdown__options::-webkit-scrollbar,
-.bik-dropdown__optionsList::-webkit-scrollbar {
-  width: 6px;
-}
-
-.bik-dropdown__options::-webkit-scrollbar-track,
-.bik-dropdown__optionsList::-webkit-scrollbar-track {
-  background: var(--bik-dropdown-scrollbar-track);
-  border-radius: 3px;
-}
-
-.bik-dropdown__options::-webkit-scrollbar-thumb,
-.bik-dropdown__optionsList::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.bik-dropdown__options::-webkit-scrollbar-thumb:hover,
-.bik-dropdown__optionsList::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}
-
-/* ACCESSIBILITY & RESPONSIVE */
-
-@media (prefers-reduced-motion: reduce) {
-  .bik-dropdown__inputWrapper,
-  .bik-dropdown__label,
-  .bik-dropdown__input,
-  .bik-dropdown__error,
-  .bik-dropdown__chevron,
-  .bik-dropdown__option {
-    transition: none;
-    animation: none;
-  }
-}
-
-@media (prefers-contrast: high) {
-  .bik-dropdown__inputWrapper,
-  .bik-dropdown__options {
-    border-width: 3px;
-  }
-
-  .bik-dropdown__label {
-    font-weight: var(--bik-dropdown-font-weight-normal);
-  }
-}
-
-/* MOBILE RESPONSIVE */
-
-@media (max-width: 768px) {
-  .bik-dropdown__inputWrapper {
-    min-height: var(--bik-dropdown-min-height-mobile);
-  }
-
-  .bik-dropdown__input {
-    font-size: var(--bik-dropdown-font-size-small);
-    padding: var(--bik-dropdown-padding-mobile);
-  }
-
-  .bik-dropdown__label {
-    left: var(--bik-dropdown-label-padding-mobile);
-    max-width: calc(100% - 60px);
-  }
-
-  .bik-dropdown__icon {
-    right: 12px;
-  }
-
-  .bik-dropdown__option {
-    padding: 12px 16px;
-    gap: 10px;
-  }
-
-  .bik-dropdown__selectedItem {
-    max-width: 120px;
-    padding: 1px 6px;
-    font-size: var(--bik-dropdown-font-size-tiny);
-    border-radius: 5px;
-  }
-
-  .bik-dropdown__removeButton {
-    width: 14px !important;
-    height: 14px !important;
-    font-size: var(--bik-dropdown-font-size-tiny) !important;
-  }
-
-  .bik-dropdown__selectedItems {
-    gap: 6px;
-    margin-top: 12px;
-  }
-
-  .bik-dropdown__selectedCount {
-    padding: 0 6px;
-    font-size: var(--bik-dropdown-font-size-tiny);
-  }
-
-  .bik-dropdown__clearButton {
-    padding: 1px 6px !important;
-    margin-left: 4px;
-    font-size: var(--bik-dropdown-font-size-tiny) !important;
-  }
-
-  .bik-dropdown__options,
-  .bik-dropdown__options--top {
-    max-height: 40vh;
-  }
-
-  .bik-dropdown__options--top {
-    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-  }
-}
-
-/* PREVIEW MODE  */
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__inputWrapper {
-  min-height: var(--bik-dropdown-min-height-preview);
-  height: var(--bik-dropdown-min-height-preview);
-  box-shadow: none;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__input {
-  padding: var(--bik-dropdown-padding-preview);
-  font-size: 8px;
-  line-height: 1.2;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__label {
-  left: var(--bik-dropdown-label-padding-preview);
-  font-size: 7px;
-  line-height: 1.2;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__label--floated,
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__label--hasValue {
-  top: 2px;
-  font-size: 6px;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__chevron {
-  width: 8px;
-  height: 8px;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__errorIcon {
-  width: 8px;
-  height: 8px;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__error {
-  font-size: 6px;
-  margin: 2px 0 0 2px;
-}
-
-.bik-dropdown__container[data-mode='preview'] .bik-dropdown__selectedItem {
-  font-size: 7px;
-  padding: 1px 2px;
-}
-
-.bik-dropdown__container[data-mode='preview']
-  .bik-dropdown__singleSelectedItem {
-  font-size: 8px;
-}
-
-/* Preview mode mobile overrides */
-@media (max-width: 768px) {
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__input {
-    font-size: 7px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__label {
-    font-size: 6px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__label--floated,
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__label--hasValue {
-    top: 1px;
-    font-size: 5px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__chevron {
-    width: 6px;
-    height: 6px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__errorIcon {
-    width: 6px;
-    height: 6px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__error {
-    font-size: 5px;
-    margin: 1px 0 0 1px;
-  }
-
-  .bik-dropdown__container[data-mode='preview'] .bik-dropdown__selectedItem {
-    font-size: 6px;
-  }
-
-  .bik-dropdown__container[data-mode='preview']
-    .bik-dropdown__singleSelectedItem {
-    font-size: 7px;
-  }
-}