@import 'tailwindcss';

:root {
  --demotime-transition-duration: 0.5s;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

blockquote {
  p {
    margin-bottom: 0 !important;
  }
}

code {
  color: var(--vscode-textPreformat-foreground);
  background-color: var(--vscode-textPreformat-background);
  padding: 1px 3px;
  border-radius: 4px;
}

pre {
}

pre code {
  padding: 0 !important;
  white-space: pre-wrap;
  background: var(--vscode-editor-background);
}

/* Table styling */
table {
  @apply w-full border-collapse my-4;
}

table th {
  @apply font-bold text-left p-2 border;
  background-color: var(--vscode-keybindingTable-headerBackground);
  color: var(--vscode-editor-foreground);
  border-color: var(--vscode-panel-border);
}

table td {
  @apply p-2 border;
  border-color: var(--vscode-panel-border);
  color: var(--vscode-editor-foreground);
}

.slide__layout {
  @apply h-full w-full relative;
}

.slide__header {
  @apply absolute top-0 left-0 w-full h-8 text-[0.75rem] px-8 flex items-center justify-center opacity-75 text-(--vscode-editor-foreground);
}

.slide__footer {
  @apply absolute bottom-0 left-0 w-full h-8 text-[0.75rem] px-8 flex items-center justify-between opacity-75 text-(--vscode-editor-foreground);
}

.slide__content {
  @apply h-full w-full text-base overflow-hidden z-20;

  .slide__content__custom,
  .slide__content__inner {
    @apply relative h-full w-full z-20;
    box-sizing: border-box;
  }
}

.slide__image_left,
.slide__image_right {
  @apply z-10;
}

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

@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    transform: rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateOut {
  from {
    transform: rotate(180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0);
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn var(--demotime-transition-duration) ease-in-out;
}

.slideLeft {
  animation: slideLeft var(--demotime-transition-duration) ease-in-out;
}

.slideRight {
  animation: slideRight var(--demotime-transition-duration) ease-in-out;
}

.slideUp {
  animation: slideUp var(--demotime-transition-duration) ease-in-out;
}

.slideDown {
  animation: slideDown var(--demotime-transition-duration) ease-in-out;
}

.zoomIn {
  animation: zoomIn var(--demotime-transition-duration) ease-in-out;
}

.zoomOut {
  animation: zoomOut var(--demotime-transition-duration) ease-in-out;
}

.rotateIn {
  animation: rotateIn var(--demotime-transition-duration) ease-in-out;
}

.rotateOut {
  animation: rotateOut var(--demotime-transition-duration) ease-in-out;
}

/* Layouts */
.image-left,
.image-right {
  @apply grid grid-cols-2 w-full h-full auto-rows-fr;
}

/* Laser pointer animation */
.laser-pointer {
  animation: laserPulse 1s infinite;
}

@keyframes laserPulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
