.root {
  display: contents;
}

.content {
  animation-timing-function: ease-in-out;
}

.overlay {
  animation-timing-function: ease-in-out;
}

.overlay[data-state="open"] {
  animation-duration: 500ms;
  animation-name: fadeIn;
}

.overlay[data-state="closed"] {
  animation-duration: 300ms;
  animation-name: fadeOut;
}

.content[data-state="open"] {
  animation-duration: 500ms;
}

.content[data-state="closed"] {
  animation-duration: 300ms;
}

.content[data-side="right"] {
  &[data-state="open"] {
    animation-name: slide-in-from-right;
  }
  &[data-state="closed"] {
    animation-name: slide-out-to-right;
  }
}
.content[data-side="left"] {
  &[data-state="open"] {
    animation-name: slide-in-from-left;
  }
  &[data-state="closed"] {
    animation-name: slide-out-to-left;
  }
}
.content[data-side="top"] {
  &[data-state="open"] {
    animation-name: slide-in-from-top;
  }
  &[data-state="closed"] {
    animation-name: slide-out-to-top;
  }
}
.content[data-side="bottom"] {
  &[data-state="open"] {
    animation-name: slide-in-from-bottom;
  }
  &[data-state="closed"] {
    animation-name: slide-out-to-bottom;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-out-to-right {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-out-to-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slide-in-from-top {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-out-to-top {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-out-to-bottom {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}