.icon {
  color: var(--vkui--color_icon_secondary);
}

.host {
  overflow: hidden;
}

.in {
  --vkui_internal--AccordionContent_height: initial;

  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@media screen and (prefers-reduced-motion: reduce) {
  .in {
    animation-duration: 300ms;
    animation-timing-function: linear;
  }
}

.inEnter {
  animation-name: animationAccordionExpand;
}

@media screen and (prefers-reduced-motion: reduce) {
  .inEnter {
    animation-name: animationAccordionFadeIn;
  }
}

.inEntered {
  block-size: var(--vkui_internal--AccordionContent_height);
}

.inExit {
  animation-name: animationAccordionCollapse;
}

@media screen and (prefers-reduced-motion: reduce) {
  .inExit {
    animation-name: animationAccordionFadeOut;
  }
}

.inExited {
  visibility: hidden;
  block-size: 0;
}

@keyframes animationAccordionExpand {
  0% {
    block-size: 0;
  }

  100% {
    block-size: var(--vkui_internal--AccordionContent_height);
  }
}

@keyframes animationAccordionCollapse {
  0% {
    block-size: var(--vkui_internal--AccordionContent_height);
  }

  100% {
    block-size: 0;
  }
}

@keyframes animationAccordionFadeIn {
  0% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 0;
  }

  50% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 0;
  }

  100% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 1;
  }
}

@keyframes animationAccordionFadeOut {
  0% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 1;
  }

  50% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 0;
  }

  100% {
    block-size: var(--vkui_internal--AccordionContent_height);
    opacity: 0;
  }
}