.concealing {
  transition: all ease, opacity ease-in-out, border-width cubic-bezier(.5, 0, 1, .5);
  transition-duration: .3s;
}

.revealing {
  transition: all ease, opacity ease-in-out, border-width cubic-bezier(0, .5, .5, 1);
  transition-duration: .3s;
}

/* style properties representing state should have very high priority.
   the selectors must have a higher specificity than any utility classes. */

:root:root:root:root .concealed,
:root:root:root:root .concealing {
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

:root:root:root:root .concealed,
:root:root:root:root .concealing,
:root:root:root:root .revealing {
  overflow-y: hidden !important;
}

:root:root:root:root .concealed,
:root:root:root:root .concealing,
:root:root:root:root .revealing,
:root:root:root:root .concealed *,
:root:root:root:root .concealing *,
:root:root:root:root .revealing * {
  pointer-events: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}