/* docara-shell-source: runtime/component/swiper/css/swiper.css */
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  .swiper {
    contain: inline-size;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow: hidden;
    position: relative;
  }
  .swiper-wrapper {
    display: flex;
    width: 100%;
    inline-size: 100%;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: ease;
  }
  /* The slide still changes; it arrives without travelling. */
  @media (prefers-reduced-motion: reduce) {
    .swiper-wrapper {
      transition-duration: 0s;
    }
  }
  .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .swiper-button-disabled {
    cursor: default;
    opacity: 0.38;
    opacity: var(--sf-opacity-disabled, 0.38);
    pointer-events: none;
  }
}

/* docara-shell-source: runtime/component/carousel/css/carousel.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  .sf-carousel {
    --sf-carousel--block-size: var(--sf-g3);
    --sf-carousel-control--background-color: var(--sf-primary);
    --sf-carousel-control--color: var(--sf-on-primary);
    --sf-carousel-pagination--background-color: var(--sf-primary);
    --sf-carousel-pagination-item--color: var(--sf-on-primary);
    height: var(--sf-carousel--block-size);
    block-size: var(--sf-carousel--block-size);
    width: 100%;
    inline-size: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    min-width: 0;
    min-inline-size: 0;
    overflow: hidden;
    position: relative;
  }
  .sf-carousel .sf-carousel-slider,
  .sf-carousel .swiper {
    height: 100%;
    block-size: 100%;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-carousel .swiper-wrapper {
    box-sizing: border-box;
    display: flex;
    /* The slides are block-size: 100% of the wrapper, which had no height of its
       own: a 416px carousel drew its slides in a 50px band. */
    height: 100%;
    block-size: 100%;
  }
  .sf-carousel .sf-carousel-slide,
  .sf-carousel .swiper-slide {
    height: 100%;
    block-size: 100%;
    flex-shrink: 0;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-carousel .sf-carousel-slide img,
  .sf-carousel .swiper-slide img {
    height: 100%;
    block-size: 100%;
    display: block;
    width: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-carousel-switch,
  .sf-carousel-rotation {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    align-items: center;
    background-color: var(--sf-carousel-control--background-color);
    border: 0;
    border-radius: var(--sf-radius--ui);
    color: var(--sf-carousel-control--color);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-width: var(--sf-ui-1--control-height);
    min-inline-size: var(--sf-ui-1--control-height);
    padding: var(--sf-ui-1--space-y);
  }
  .sf-carousel-switch:hover,
  .sf-carousel-rotation:hover {
    --sf-carousel-control--background-color: var(--sf-primary-hover);
    --sf-carousel-control--color: var(--sf-on-primary);
  }
  .sf-carousel-switch.focus-visible,
  .sf-carousel-rotation.focus-visible,
  .sf-carousel-pagination-item.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-carousel-switch:focus-visible,
  .sf-carousel-rotation:focus-visible,
  .sf-carousel-pagination-item:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-carousel-switch--secondary-container {
    --sf-carousel-control--background-color: var(--sf-secondary-container);
    --sf-carousel-control--color: var(--sf-on-secondary-container);
  }
  .sf-carousel-switch--secondary-container:hover {
    --sf-carousel-control--background-color: var(--sf-secondary-container-hover);
    --sf-carousel-control--color: var(--sf-on-secondary-container);
  }
  .sf-carousel-switch--surface-inverse {
    --sf-carousel-control--background-color: var(--sf-surface-inverse);
    --sf-carousel-control--color: var(--sf-on-surface-inverse);
  }
  .sf-carousel-switch--surface-inverse:hover {
    --sf-carousel-control--background-color: var(--sf-surface-inverse-hover);
    --sf-carousel-control--color: var(--sf-on-surface-inverse);
  }
  .sf-carousel-switch--surface-zero {
    --sf-carousel-control--background-color: var(--sf-surface-0);
    --sf-carousel-control--color: var(--sf-on-surface);
  }
  .sf-carousel-switch--surface-zero:hover {
    --sf-carousel-control--background-color: var(--sf-surface-1);
    --sf-carousel-control--color: var(--sf-on-surface-hover);
  }
  .sf-carousel-switch--big {
    min-height: var(--sf-ui-2--control-height);
    min-block-size: var(--sf-ui-2--control-height);
    min-width: var(--sf-ui-2--control-height);
    min-inline-size: var(--sf-ui-2--control-height);
    padding: var(--sf-ui-2--space-y);
  }
  .sf-carousel .sf-carousel-switch {
    top: 50%;
    inset-block-start: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-carousel .sf-carousel-switch--right,html:not([dir="rtl"])
  .sf-carousel .sf-carousel-switch--next {
    right: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-carousel .sf-carousel-switch--right,html:not([dir="rtl"])
  .sf-carousel .sf-carousel-switch--next {
    right: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-switch--right:where(:dir(ltr)),
  .sf-carousel .sf-carousel-switch--next:where(:dir(ltr)) {
    right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-carousel .sf-carousel-switch--right,[dir="rtl"]
  .sf-carousel .sf-carousel-switch--next {
    left: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-carousel .sf-carousel-switch--right,[dir="rtl"]
  .sf-carousel .sf-carousel-switch--next {
    left: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-switch--right:where(:dir(rtl)),
  .sf-carousel .sf-carousel-switch--next:where(:dir(rtl)) {
    left: var(--sf-space-1);
  }
  .sf-carousel .sf-carousel-switch--right,
  .sf-carousel .sf-carousel-switch--next {
    inset-inline-end: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-carousel .sf-carousel-switch--left,html:not([dir="rtl"])
  .sf-carousel .sf-carousel-switch--prev {
    left: var(--sf-space-1);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-carousel .sf-carousel-switch--left,html:not([dir="rtl"])
  .sf-carousel .sf-carousel-switch--prev {
    left: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-switch--left:where(:dir(ltr)),
  .sf-carousel .sf-carousel-switch--prev:where(:dir(ltr)) {
    left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-carousel .sf-carousel-switch--left,[dir="rtl"]
  .sf-carousel .sf-carousel-switch--prev {
    right: var(--sf-space-1);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-carousel .sf-carousel-switch--left,[dir="rtl"]
  .sf-carousel .sf-carousel-switch--prev {
    right: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-switch--left:where(:dir(rtl)),
  .sf-carousel .sf-carousel-switch--prev:where(:dir(rtl)) {
    right: var(--sf-space-1);
  }
  .sf-carousel .sf-carousel-switch--left,
  .sf-carousel .sf-carousel-switch--prev {
    inset-inline-start: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-carousel .sf-carousel-rotation {
    right: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-carousel .sf-carousel-rotation {
    right: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-rotation:where(:dir(ltr)) {
    right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-carousel .sf-carousel-rotation {
    left: var(--sf-space-1);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-carousel .sf-carousel-rotation {
    left: var(--sf-space-1);
    }
  }
  .sf-carousel .sf-carousel-rotation:where(:dir(rtl)) {
    left: var(--sf-space-1);
  }
  .sf-carousel .sf-carousel-rotation {
    top: var(--sf-space-1);
    inset-block-start: var(--sf-space-1);
    inset-inline-end: var(--sf-space-1);
    position: absolute;
    z-index: 2;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-carousel-pagination {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-carousel-pagination {
    left: 50%;
    }
  }
  .sf-carousel-pagination:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-carousel-pagination {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-carousel-pagination {
    right: 50%;
    }
  }
  .sf-carousel-pagination:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-carousel-pagination {
    align-items: center;
    background-color: var(--sf-carousel-pagination--background-color);
    border-radius: var(--sf-radius--ui);
    display: inline-flex;
    gap: var(--sf-space-1\/2);
    bottom: var(--sf-space-1);
    inset-block-end: var(--sf-space-1);
    inset-inline-start: 50%;
    padding: var(--sf-space-1\/2);
    position: absolute;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 2;
  }
  .sf-carousel-pagination-item,
  button.sf-carousel-pagination-item {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--sf-radius-circle);
    color: var(--sf-carousel-pagination-item--color);
    cursor: pointer;
    min-height: var(--sf-ui-1\/3--control-height);
    min-block-size: var(--sf-ui-1\/3--control-height);
    min-width: var(--sf-ui-1\/3--control-height);
    min-inline-size: var(--sf-ui-1\/3--control-height);
    padding: 0;
    position: relative;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-carousel-pagination-item::after {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-carousel-pagination-item::after {
    left: 50%;
    }
  }
  .sf-carousel-pagination-item::after:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-carousel-pagination-item::after {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-carousel-pagination-item::after {
    right: 50%;
    }
  }
  .sf-carousel-pagination-item::after:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-carousel-pagination-item::after {
    background-color: currentColor;
    border-radius: var(--sf-radius-circle);
    height: var(--sf-a8);
    block-size: var(--sf-a8);
    content: "";
    width: var(--sf-a8);
    inline-size: var(--sf-a8);
    top: 50%;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    opacity: var(--sf-opacity-40);
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .sf-carousel-pagination-item:hover::after,
  .sf-carousel-pagination-item--active::after,
  .swiper-pagination-bullet-active::after {
    opacity: 1;
    opacity: initial;
  }
  .sf-carousel-pagination--primary-container {
    --sf-carousel-pagination--background-color: var(--sf-primary-container);
    --sf-carousel-pagination-item--color: var(--sf-on-primary-container);
  }
  .sf-carousel-pagination--surface-2 {
    --sf-carousel-pagination--background-color: var(--sf-surface-1);
    --sf-carousel-pagination-item--color: var(--sf-on-surface);
  }
  .sf-carousel-pagination--surface-inverse {
    --sf-carousel-pagination--background-color: var(--sf-surface-inverse);
    --sf-carousel-pagination-item--color: var(--sf-on-surface-inverse);
  }
  .sf-carousel-pagination--no-background {
    --sf-carousel-pagination--background-color: transparent;
    --sf-carousel-pagination-item--color: var(--sf-primary);
  }
  .sf-carousel-pagination--big .sf-carousel-pagination-item {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-width: var(--sf-ui-1--control-height);
    min-inline-size: var(--sf-ui-1--control-height);
  }
  .sf-carousel .swiper-button-disabled {
    cursor: default;
    opacity: var(--sf-opacity-40);
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-carousel .swiper-wrapper,
    .sf-carousel .sf-carousel-slide {
      transition-duration: 0s !important;
    }
  }
  @media (forced-colors: active) {
    .sf-carousel-switch,
    .sf-carousel-rotation,
    .sf-carousel-pagination {
      border: var(--sf-focus-outline-width) solid ButtonText;
      forced-color-adjust: none;
    }
    .sf-carousel-pagination-item {
      color: ButtonText;
    }
    .sf-carousel-pagination-item--active {
      color: Highlight;
    }
  }
}