/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/codekrakers/components/slider/src/slider.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
.draggable--container {
  cursor: grab;
}

.flickity-enabled {
  position: relative;
}
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.flickity-enabled.is-draggable:focus-visible {
  outline: 0.2rem solid var(--focus-outline-color, var(--text-color));
  outline-offset: 0.2rem;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}
.flickity-slider > * {
  position: absolute;
}

:where(.flickity-viewport, .flickity-slider, .flickity-enabled):is(:focus, :hover) {
  outline: 0;
}

.flickity-enabled .flickity-prev-next-button {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 0;
  border: 0;
  background: var(--flickity-control-bg, transparent);
  color: var(--flickity-control-color, currentColor);
  cursor: pointer;
}
.flickity-enabled .flickity-prev-next-button:disabled {
  opacity: 0;
  pointer-events: none;
}
.flickity-enabled .flickity-prev-next-button.previous {
  inset-inline-start: var(--flickity-control-offset, 0);
}
.flickity-enabled .flickity-prev-next-button.next {
  inset-inline-end: var(--flickity-control-offset, 0);
}
.flickity-enabled .flickity-prev-next-button:focus-visible {
  outline: 0.2rem solid var(--focus-outline-color, var(--text-color));
  outline-offset: 0.2rem;
}
.flickity-enabled .flickity-page-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--flickity-dot-gap, 0.4rem);
  margin: var(--flickity-dots-margin, 2rem 0 0);
  padding: 0;
  list-style: none;
}
.flickity-enabled .flickity-page-dots .flickity-page-dot {
  display: block;
  inline-size: var(--flickity-dot-size, 3rem);
  block-size: var(--flickity-dot-height, 0.6rem);
  padding: 0;
  border: 0;
  border-radius: var(--flickity-dot-radius, 0.4rem);
  background: var(--flickity-dot-bg, rgba(0, 0, 0, 0.2));
  cursor: pointer;
}
.flickity-enabled .flickity-page-dots .flickity-page-dot.is-selected {
  background: var(--flickity-dot-bg-selected, rgba(0, 0, 0, 0.5));
}

.twz-slider__controls {
  --slider-control-gap: 1rem;
  --slider-dot-gap: 0.5rem;
  --slider-dot-size: 0.4rem;
  --slider-dot-active-width: 3.3rem;
  --slider-arrow-size: 3.6rem;
  --slider-dot-color: var(--text-color, #faf7f2);
  --slider-dot-active-color: var(--gold-500, #d1ad59);
  --slider-control-color: var(--text-color, #faf7f2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-control-gap);
  margin-block-start: 2.4rem;
  padding-inline: 1.9rem 2.8rem;
  padding-block: 0.4rem;
  color: var(--slider-control-color);
}
.twz-slider__controls:not(.is-active), .twz-slider__controls[hidden] {
  display: none;
}

.twz-slider__button {
  --twz-icon-size: auto;
  --twz-icon-fill: currentColor;
  --twz-icon-stroke: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--slider-arrow-size);
  min-block-size: 2.1rem;
  block-size: var(--slider-arrow-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: visible;
}
.twz-slider__button :where(.twz-icon, svg) {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
  stroke: none;
}
.twz-slider__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.twz-slider__button:is(:hover, :focus-visible):not(:disabled) {
  color: var(--slider-dot-active-color);
  outline: none;
}
.twz-slider__button--prev {
  rotate: 180deg;
}

.twz-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap);
  min-block-size: var(--slider-dot-size);
  margin-inline: 2rem;
}

.twz-slider__dot {
  display: block;
  inline-size: var(--slider-dot-size);
  block-size: var(--slider-dot-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--slider-dot-color);
  cursor: pointer;
  transition: inline-size 0.2s ease, background-color 0.2s ease;
}
.twz-slider__dot.is-selected {
  inline-size: var(--slider-dot-active-width);
  background: var(--slider-dot-active-color);
}
.twz-slider__dot:is(:hover, :focus-visible):not(.is-selected) {
  background: var(--slider-dot-active-color);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .twz-slider__dot {
    transition: none;
  }
}