@mantine/core/cjs/components/Combobox/Combobox.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Combobox.module.cjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".dropdown {\n  --combobox-padding: 4px;\n  padding: var(--combobox-padding);\n\n  &:has([data-mantine-scrollbar]) {\n    .search {\n      max-width: calc(100% + var(--combobox-padding));\n    }\n  }\n\n  &[data-composed] {\n    padding-inline-end: 0;\n  }\n\n  &[data-hidden] {\n    display: none;\n  }\n}\n\n/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */\n.dropdown,\n.options {\n  --combobox-option-padding-xs: 4px 8px;\n  --combobox-option-padding-sm: 6px 10px;\n  --combobox-option-padding-md: 8px 12px;\n  --combobox-option-padding-lg: 10px 16px;\n  --combobox-option-padding-xl: 14px 20px;\n  --combobox-option-padding: var(--combobox-option-padding-sm);\n}\n\n.option {\n  padding: var(--combobox-option-padding);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border-radius: var(--mantine-radius-default);\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n  overflow-wrap: break-word;\n\n  &:where([data-combobox-selected]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n  }\n\n  &:where([data-combobox-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  @mixin hover {\n    &:where(:not([data-combobox-selected], [data-combobox-disabled])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-7);\n      }\n    }\n  }\n}\n\n.search {\n  margin-inline: calc(var(--combobox-padding) * -1);\n  margin-top: calc(var(--combobox-padding) * -1);\n  width: calc(100% + var(--combobox-padding) * 2);\n  border-top-width: 0;\n  border-inline-width: 0;\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n  margin-bottom: var(--combobox-padding);\n  position: relative;\n\n  &,\n  &:focus {\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n  }\n}\n\n.empty {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  text-align: center;\n  padding: var(--combobox-option-padding);\n  color: var(--mantine-color-dimmed);\n}\n\n.header,\n.footer {\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border: 0 solid transparent;\n  margin-inline: calc(var(--combobox-padding) * -1);\n  padding: var(--combobox-option-padding);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.footer {\n  border-top-width: 1px;\n  margin-top: var(--combobox-padding);\n  margin-bottom: calc(var(--combobox-padding) * -1);\n}\n\n.header {\n  border-bottom-width: 1px;\n  margin-bottom: var(--combobox-padding);\n  margin-top: calc(var(--combobox-padding) * -1);\n}\n\n.group {\n  &:has(.groupLabel:only-child) {\n    display: none;\n  }\n}\n\n.groupLabel {\n  color: var(--mantine-color-dimmed);\n  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);\n  padding: var(--combobox-option-padding);\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  &::after {\n    content: '';\n    flex: 1;\n    inset-inline: 0;\n    height: 1px;\n    margin-inline-start: var(--mantine-spacing-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:only-child {\n    display: none;\n  }\n}\n\n/* ------- Combobox.Chevron ------- */\n.chevron {\n  --combobox-chevron-size-xs: 14px;\n  --combobox-chevron-size-sm: 18px;\n  --combobox-chevron-size-md: 20px;\n  --combobox-chevron-size-lg: 24px;\n  --combobox-chevron-size-xl: 28px;\n  --combobox-chevron-size: var(--combobox-chevron-size-sm);\n\n  @mixin where-light {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));\n  }\n\n  @mixin where-dark {\n    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));\n  }\n\n  width: var(--combobox-chevron-size);\n  height: var(--combobox-chevron-size);\n  color: var(--_combobox-chevron-color);\n\n  &:where([data-error]) {\n    color: var(--combobox-chevron-color, var(--mantine-color-error));\n  }\n}\n\n/* ------- OptionsDropdown ------- */\n.optionsDropdownOption {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  &:where([data-reverse]) {\n    justify-content: space-between;\n  }\n}\n\n.optionsDropdownCheckIcon {\n  opacity: 0.4;\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.optionsDropdownCheckPlaceholder {\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n}\n"],"mappings":""}