@import './theme.css';

/* ------ Content Area ------ */
.content-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.content-area-padding {
  padding: var(--spacing-md);
}

@media (min-width: 900px) {
  .content-area-padding {
    padding: var(--spacing-lg);
  }
}

.content-container {
  /* position: absolute; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

/* Page transition animations */
.page-fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-page), transform var(--transition-page);
}

.page-fade-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-fade-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--transition-page), transform var(--transition-page);
}