@st-namespace 'DotNavigation-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import RadioButton from '../internal/WixUiCoreComponents/components/CoreRadioButton/CoreRadioButton.st.css';

/*
 * Dot color
 * @type color
*/
@property st-global(--wix-ui-tpa-dot-navigation-selected-dot-color);

/*
 * Border color
 * @type color
 */
@property st-global(--wix-ui-tpa-dot-navigation-selected-border-color);

@keyframes move-back {
  from {
    left: calc(-2 * calc(4 * 4px));
  }

  to {
    left: calc(-1 * calc(4 * 4px));
  }
}

@keyframes move-back-next {
  from {
    left: calc(-2 * calc(4 * 4px));
  }

  to {
    left: calc(-1 * calc(4 * 4px));
  }
}

@keyframes move-forward {
  from {
    left: 0;
  }

  to {
    left: calc(-1 * calc(4 * 4px));
  }
}

@keyframes move-forward-next {
  from {
    left: 0;
  }

  to {
    left: calc(-1 * calc(4 * 4px));
  }
}

@keyframes change-dot-opacity {
  to {
    opacity: 1;
  }
}

.root {
  -st-states: short;
  display: flex;
  position: relative;
  width: calc(5 * calc(4 * 4px));
  overflow: hidden;
}

.root:short {
  justify-content: center;
  width: max-content;
}

.radioGroup {
  display: flex;
  align-items: center;
  position: relative;
  left: calc(-1 * calc(4 * 4px));
}

.back {
  animation-duration: 0.2s;
  animation-name: move-back;
}

.backNext {
  animation-duration: 0.2s;
  animation-name: move-back-next;
}

.forward {
  animation-duration: 0.2s;
  animation-name: move-forward;
}

.forwardNext {
  animation-duration: 0.2s;
  animation-name: move-forward-next;
}

.extendedRadioButton {
  -st-extends: RadioButton;
}

.radio {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(4 * 4px);
  height: calc(4 * 4px);
}

.dot {
  width: calc(2 * 4px);
  height: calc(2 * 4px);
  border-radius: 100%;
  background-color: createColor(--wix-ui-tpa-dot-navigation-selected-dot-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.noOpacityTransition {
  transition: none;
}

.dot:hover {
  opacity: 1;
}

.small {
  width: calc(calc(2 * 4px) - 2px);
  height: calc(calc(2 * 4px) - 2px);
}

.tiny {
  width: calc(calc(calc(2 * 4px) - 2px) - 2px);
  height: calc(calc(calc(2 * 4px) - 2px) - 2px);
}

.bordered {
  box-shadow: 0 0 0 1px createColor(--wix-ui-tpa-dot-navigation-selected-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-1)));
}

.light {
  background-color: createColor(--wix-ui-tpa-dot-navigation-selected-dot-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  opacity: 0.4;
}

.bordered.light {
  box-shadow: 0 0 0 1px createColor(--wix-ui-tpa-dot-navigation-selected-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.checked {
  animation-duration: 0.2s;
  animation-name: change-dot-opacity;
  opacity: 1;
}

/* st-namespace-reference="../../../../src/components/DotNavigation/DotNavigation.st.css" */