[data-c42-drawer][hidden] {
  display: none;
}

[data-c42-drawer] {
  position: fixed;
  inset: 0;
  z-index: 50;
}

[data-c42-drawer-overlay] {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  animation: c42-fade-in var(--c42-transition, 200ms ease);
}

[data-c42-drawer-content] {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--c42-space, 1rem);
  background: var(--c42-color-bg, #ffffff);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Left / right: full-height vertical panels. */
[data-c42-drawer][data-side='left'] [data-c42-drawer-content],
[data-c42-drawer][data-side='right'] [data-c42-drawer-content] {
  inset-block: 0;
  width: 100%;
  max-width: 22rem;
}

[data-c42-drawer][data-side='left'] [data-c42-drawer-content] {
  inset-inline-start: 0;
  border-end-end-radius: var(--c42-radius, 0.75rem);
  border-start-end-radius: var(--c42-radius, 0.75rem);
  animation: c42-slide-in-left var(--c42-transition, 200ms ease);
}

[data-c42-drawer][data-side='right'] [data-c42-drawer-content] {
  inset-inline-end: 0;
  border-end-start-radius: var(--c42-radius, 0.75rem);
  border-start-start-radius: var(--c42-radius, 0.75rem);
  animation: c42-slide-in-right var(--c42-transition, 200ms ease);
}

/* Top / bottom: full-width horizontal panels. */
[data-c42-drawer][data-side='top'] [data-c42-drawer-content],
[data-c42-drawer][data-side='bottom'] [data-c42-drawer-content] {
  inset-inline: 0;
  max-height: 22rem;
}

[data-c42-drawer][data-side='top'] [data-c42-drawer-content] {
  inset-block-start: 0;
  border-end-start-radius: var(--c42-radius, 0.75rem);
  border-end-end-radius: var(--c42-radius, 0.75rem);
  animation: c42-slide-in-top var(--c42-transition, 200ms ease);
}

[data-c42-drawer][data-side='bottom'] [data-c42-drawer-content] {
  inset-block-end: 0;
  border-start-start-radius: var(--c42-radius, 0.75rem);
  border-start-end-radius: var(--c42-radius, 0.75rem);
  animation: c42-slide-in-bottom var(--c42-transition, 200ms ease);
}

@keyframes c42-fade-in {
  from { opacity: 0; }
}

@keyframes c42-slide-in-left {
  from { transform: translateX(-100%); }
}

@keyframes c42-slide-in-right {
  from { transform: translateX(100%); }
}

@keyframes c42-slide-in-top {
  from { transform: translateY(-100%); }
}

@keyframes c42-slide-in-bottom {
  from { transform: translateY(100%); }
}