/*
  display
  hide and show a child element using display
*/
.hover-parent.hover--display .hover-child,
.hover-parent:hover.hover--display .hover-child--hidden {
  display: none;
}

.hover-parent:hover.hover--display .hover-child {
  display: block;
}

/*
  visibility
  hide and show a child element using visibility
*/
.hover-parent.hover--visibility .hover-child,
.hover-parent:hover.hover--visibility .hover-child--hidden {
  visibility: hidden;
}

.hover-parent:hover.hover--visibility .hover-child {
  visibility: visible;
}

.hover-parent:hover.hover--inherit > *,
.hover-parent:hover.hover--inherit .hover-child {
  color: inherit !important;
}

.hover-child--smooth {
  transition: opacity 0.2s ease-in-out;
}

@media (prefers-reduced-motion) {
  .hover-child--smooth {
    transition: none;
  }
}

.hover-parent.hover--display .hover-child--smooth,
.hover-parent.hover--visibility .hover-child--smooth {
  opacity: 0;
}

.hover-parent:hover.hover--display .hover-child--smooth,
.hover-parent:hover.hover--visibility .hover-child--smooth {
  opacity: 1;
}