.cc[data-v-2f33ce18] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-4);
}
.cc__dots[data-v-2f33ce18] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cc__dot[data-v-2f33ce18] {
  width: 8px;
  height: 8px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-line-strong);
  transition:
    width var(--dt-dur-3) var(--dt-ease-out),
    background-color var(--dt-dur-3) var(--dt-ease-out);
}
.cc__dot--active[data-v-2f33ce18] {
  width: 26px;
  background: var(--dt-teal-500);
}
.cc__buttons[data-v-2f33ce18] {
  display: flex;
  gap: var(--dt-space-2);
}
.cc__btn[data-v-2f33ce18] {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  color: var(--dt-navy-700);
  box-shadow: var(--dt-shadow-sm);
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    border-color var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-spring),
    opacity var(--dt-dur-2) var(--dt-ease-out);
}
.cc__btn[data-v-2f33ce18]:hover:not(:disabled) {
  background: var(--dt-teal-50);
  border-color: var(--dt-teal-300);
  transform: scale(1.06);
}
.cc__btn[data-v-2f33ce18]:active:not(:disabled) {
  transform: scale(0.95);
}
.cc__btn[data-v-2f33ce18]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cc--light .cc__btn[data-v-2f33ce18] {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
  box-shadow: none;
}
.cc--light .cc__btn[data-v-2f33ce18]:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.24);
}
.cc--light .cc__dot[data-v-2f33ce18] {
  background: rgb(255 255 255 / 0.35);
}
.cc--light .cc__dot--active[data-v-2f33ce18] {
  background: #fff;
}