@mantine/carousel/cjs/Carousel.module.cjs.map

Embla based carousel

{"version":3,"file":"Carousel.module.cjs","names":[],"sources":["../src/Carousel.module.css"],"sourcesContent":[".root {\n  --carousel-height: auto;\n  position: relative;\n}\n\n.viewport {\n  height: var(--carousel-height);\n  overflow: hidden;\n\n  &[data-type='container'] {\n    container: carousel / inline-size;\n  }\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  height: var(--carousel-height);\n\n  :where([data-include-gap-in-size]) & {\n    &:where([data-orientation='vertical']) {\n      margin-bottom: calc(var(--carousel-slide-gap) * -1);\n    }\n\n    &:where([data-orientation='horizontal']) {\n      margin-inline-end: calc(var(--carousel-slide-gap) * -1);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n}\n\n.controls {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  z-index: 1;\n  pointer-events: none;\n\n  &:where([data-orientation='vertical']) {\n    inset-inline-start: calc(50% - var(--carousel-control-size) / 2);\n    top: 0;\n    bottom: 0;\n    flex-direction: column;\n    padding: var(--carousel-controls-offset) 0;\n  }\n\n  &:where([data-orientation='horizontal']) {\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: calc(50% - var(--carousel-control-size) / 2);\n    flex-direction: row;\n    padding: 0 var(--carousel-controls-offset);\n  }\n}\n\n.control {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: var(--carousel-control-size);\n  min-height: var(--carousel-control-size);\n  border-radius: var(--carousel-control-size);\n  pointer-events: all;\n  background-color: var(--mantine-color-white);\n  color: var(--mantine-color-black);\n  box-shadow: var(--mantine-shadow-md);\n  border: 1px solid var(--mantine-color-gray-3);\n  transition: opacity 100ms ease;\n\n  @mixin where-light {\n    opacity: 0.85;\n  }\n\n  @mixin where-dark {\n    opacity: 0.65;\n  }\n\n  @mixin hover {\n    opacity: 1;\n  }\n}\n\n.indicators {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  pointer-events: none;\n\n  &:where([data-orientation='vertical']) {\n    bottom: 0;\n    top: 0;\n    inset-inline-end: var(--mantine-spacing-md);\n    flex-direction: column;\n  }\n\n  &:where([data-orientation='horizontal']) {\n    bottom: var(--mantine-spacing-md);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    flex-direction: row;\n  }\n}\n\n.indicator {\n  pointer-events: all;\n  border-radius: var(--mantine-radius-xl);\n  box-shadow: var(--mantine-shadow-sm);\n  opacity: 0.6;\n  background-color: var(--mantine-color-white);\n\n  @mixin hover {\n    opacity: 1;\n  }\n\n  &:where([data-active]) {\n    opacity: 1;\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: 5px;\n    height: 25px;\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: 25px;\n    height: 5px;\n  }\n}\n\n.slide {\n  position: relative;\n  flex: 0 0 var(--carousel-slide-size, 100%);\n\n  .root:where([data-include-gap-in-size]) & {\n    &:where([data-orientation='vertical']) {\n      padding-bottom: var(--carousel-slide-gap);\n    }\n\n    &:where([data-orientation='horizontal']) {\n      padding-inline-end: var(--carousel-slide-gap);\n    }\n  }\n\n  .root:where(:not([data-include-gap-in-size])) & {\n    &:where([data-orientation='vertical']) {\n      margin-bottom: var(--carousel-slide-gap);\n    }\n\n    &:where([data-orientation='horizontal']) {\n      margin-inline-end: var(--carousel-slide-gap);\n    }\n  }\n}\n"],"mappings":""}