<commit_before>/*
Consistency between navigation and pagination hover/active/focus styles
*/

:host {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  contain: content;

  --x-slider-gap: 16px;

  --x-slider-background-color: transparent;

  --x-slider-slide-min-height: 0px;
  --x-slider-slide-max-height: none;

  --x-slider-transition-duration: 0.6s;
  --x-slider-transition-timing-function: cubic-bezier(.25, .46, .45, .94);

  --x-slider-navigation-color: #000;
  --x-slider-navigation-color-focus: var(--x-slider-navigation-color);
  --x-slider-navigation-background-color: transparent;
  --x-slider-navigation-background-color-focus: #f0f0f0;
  --x-slider-navigation-button-size: 48px;
  --x-slider-navigation-icon-size: 24px;
  --x-slider-navigation-icon-mask: svg-load('./arrow-left.svg', fill: #000);

  --x-slider-pagination-color: #999;
  --x-slider-pagination-color-selected: #000;
  --x-slider-pagination-size-clickable: 24px;
  --x-slider-pagination-size-dot: 8px;
  --x-slider-pagination-gap: 2px;
  --x-slider-pagination-height: 44px;
}

:host([hidden]) {
  display: none
}

:host-context(.js-focus-visible) :focus:not(.focus-visible),
:host-context(.js-focus-visible) ::slotted(*:focus:not(.focus-visible)) {
  outline: 0;
}

#externalWrapper {
  height: 100%;

  overflow: hidden;
  contain: paint;

  background-color: var(--x-slider-background-color);

  /*
    https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  */
  touch-action: pan-y pinch-zoom;

  cursor: grab;
}

:host([pointer-down]) #externalWrapper {
  cursor: grabbing;
}

:host([disable-drag]) #externalWrapper,
:host([disable-drag][pointer-down]) #externalWrapper {
  cursor: default;
}


#slidesWrapper {
  display: flex;
  align-items: stretch;

  height: 100%;
  min-height: var(--x-slider-slide-min-height);
  max-height: var(--x-slider-slide-max-height);

  will-change: transform;

  --x-slider__internal__slides-per-view: 1;
}

:host([transitioning]) #slidesWrapper {
  transition-property: transform;
  transition-duration: var(--x-slider-transition-duration);
  transition-timing-function: var(--x-slider-transition-timing-function);
}

#pagination {
  display: none;
}

:host([pagination]) #pagination {
  align-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--x-slider-pagination-height);
  min-height: var(--x-slider-pagination-size-clickable);

  contain: strict;

  font-size: 0;
}

#paginationSlot::slotted(button) {
  position: relative;

  width: var(--x-slider-pagination-size-clickable);
  height: var(--x-slider-pagination-size-clickable);

  margin: 0 calc(var(--x-slider-pagination-gap) / 2);
  padding: 0;

  border: none;
  background: none;

  font-size: inherit;

  cursor: pointer;

  opacity: .8;
}

#paginationSlot::slotted(button)::before,
#paginationSlot::slotted(button)::after {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: block;

  width: var(--x-slider-pagination-size-dot);
  height: var(--x-slider-pagination-size-dot);

  border-radius: 50%;

  background-color: var(--x-slider-pagination-color);

  content: '';
}

#paginationSlot::slotted(button)::before {
  transform: translate(-50%, -50%) scale(2);

  opacity: 0;

  will-change: opacity;
}

#paginationSlot::slotted(button:hover),
#paginationSlot::slotted(.disabled) {
  opacity: 1;
}

#paginationSlot::slotted(button:active)::before,
#paginationSlot::slotted(button.focus-visible)::before {
  opacity: .2;
}

#paginationSlot::slotted(.disabled)::after {
  background-color: var(--x-slider-pagination-color-selected);
}

#slidesSlot::slotted(*) {
  /* (100% - gap * (slidesPerView - 1)) / slidesPerView */
  flex: 0 0 calc((100% - (var(--x-slider__internal__slides-per-view) - 1) *<commit_msg>fix(pagination): added box-sixing to pagination dots<commit_after>/*
Consistency between navigation and pagination hover/active/focus styles
*/

:host {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  contain: content;

  --x-slider-gap: 16px;

  --x-slider-background-color: transparent;

  --x-slider-slide-min-height: 0px;
  --x-slider-slide-max-height: none;

  --x-slider-transition-duration: 0.6s;
  --x-slider-transition-timing-function: cubic-bezier(.25, .46, .45, .94);

  --x-slider-navigation-color: #000;
  --x-slider-navigation-color-focus: var(--x-slider-navigation-color);
  --x-slider-navigation-background-color: transparent;
  --x-slider-navigation-background-color-focus: #f0f0f0;
  --x-slider-navigation-button-size: 48px;
  --x-slider-navigation-icon-size: 24px;
  --x-slider-navigation-icon-mask: svg-load('./arrow-left.svg', fill: #000);

  --x-slider-pagination-color: #999;
  --x-slider-pagination-color-selected: #000;
  --x-slider-pagination-size-clickable: 24px;
  --x-slider-pagination-size-dot: 8px;
  --x-slider-pagination-gap: 2px;
  --x-slider-pagination-height: 44px;
}

:host([hidden]) {
  display: none
}

:host-context(.js-focus-visible) :focus:not(.focus-visible),
:host-context(.js-focus-visible) ::slotted(*:focus:not(.focus-visible)) {
  outline: 0;
}

#externalWrapper {
  height: 100%;

  overflow: hidden;
  contain: paint;

  background-color: var(--x-slider-background-color);

  /*
    https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  */
  touch-action: pan-y pinch-zoom;

  cursor: grab;
}

:host([pointer-down]) #externalWrapper {
  cursor: grabbing;
}

:host([disable-drag]) #externalWrapper,
:host([disable-drag][pointer-down]) #externalWrapper {
  cursor: default;
}


#slidesWrapper {
  display: flex;
  align-items: stretch;

  height: 100%;
  min-height: var(--x-slider-slide-min-height);
  max-height: var(--x-slider-slide-max-height);

  will-change: transform;

  --x-slider__internal__slides-per-view: 1;
}

:host([transitioning]) #slidesWrapper {
  transition-property: transform;
  transition-duration: var(--x-slider-transition-duration);
  transition-timing-function: var(--x-slider-transition-timing-function);
}

#pagination {
  display: none;
}

:host([pagination]) #pagination {
  align-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--x-slider-pagination-height);
  min-height: var(--x-slider-pagination-size-clickable);

  contain: strict;

  font-size: 0;
}

#paginationSlot::slotted(button) {
  position: relative;

  width: var(--x-slider-pagination-size-clickable);
  height: var(--x-slider-pagination-size-clickable);

  margin: 0 calc(var(--x-slider-pagination-gap) / 2);
  padding: 0;

  border: none;
  background: none;

  font-size: inherit;

  cursor: pointer;

  opacity: .8;
}

#paginationSlot::slotted(button)::before,
#paginationSlot::slotted(button)::after {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: block;

  width: var(--x-slider-pagination-size-dot);
  height: var(--x-slider-pagination-size-dot);

  border-radius: 50%;
  box-sizing: border-box;

  background-color: var(--x-slider-pagination-color);

  content: '';
}

#paginationSlot::slotted(button)::before {
  transform: translate(-50%, -50%) scale(2);

  opacity: 0;

  will-change: opacity;
}

#paginationSlot::slotted(button:hover),
#paginationSlot::slotted(.disabled) {
  opacity: 1;
}

#paginationSlot::slotted(button:active)::before,
#paginationSlot::slotted(button.focus-visible)::before {
  opacity: .2;
}

#paginationSlot::slotted(.disabled)::after {
  background-color: var(--x-slider-pagination-color-selected);
}

#slidesSlot::slotted(*) {
  /* (100% - gap * (slidesPerView - 1)) / slidesPerView */
  flex: 0 0 calc((100% - (var(--x-slider__internal__slides-per-view) - 1) *
{'fraction_non_alphanumeric': 0.18135048231511253, 'fraction_numerical': 0.021093247588424437, 'mean_word_length': 3.9814221652786674, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '301361', 'n_tokens_mistral': 2996, 'n_tokens_neox': 2786, 'n_words': 445}