/* Vaul drawer styles – required for drawer animations */
[data-vaul-drawer] {
  touch-action: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
  animation-name: slideFromBottom;
}
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
  animation-name: slideToBottom;
}

[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open'] {
  animation-name: slideFromTop;
}
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed'] {
  animation-name: slideToTop;
}

[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open'] {
  animation-name: slideFromLeft;
}
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed'] {
  animation-name: slideToLeft;
}

[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open'] {
  animation-name: slideFromRight;
}
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed'] {
  animation-name: slideToRight;
}

[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
  transform: translate3d(0, var(--initial-transform, 100%), 0);
}

[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
  transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
}

[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
  transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
}

[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
  transform: translate3d(var(--initial-transform, 100%), 0, 0);
}

[data-vaul-overlay][data-vaul-snap-points='false'] {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
[data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
  animation-name: fadeIn;
}
[data-vaul-overlay][data-state='closed'] {
  animation-name: fadeOut;
}

[data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
  content: '';
  position: absolute;
  background: inherit;
  background-color: inherit;
}

[data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
  top: 100%;
  bottom: initial;
  left: 0;
  right: 0;
  height: 200%;
}

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

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

@keyframes slideFromBottom {
  from { transform: translate3d(0, var(--initial-transform, 100%), 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes slideToBottom {
  to { transform: translate3d(0, var(--initial-transform, 100%), 0); }
}

@keyframes slideFromTop {
  from { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes slideToTop {
  to { transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0); }
}

@keyframes slideFromLeft {
  from { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes slideToLeft {
  to { transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0); }
}

@keyframes slideFromRight {
  from { transform: translate3d(var(--initial-transform, 100%), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes slideToRight {
  to { transform: translate3d(var(--initial-transform, 100%), 0, 0); }
}