.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

@media (max-width: calc(768px - 0.5px)) {
  .container {
    flex-direction: column;
  }
}

.calendar {
  box-shadow: 0 2px 6px 0 var(--color-shadow);

  /* Each hour in RBC has a min-height of 40px, and a day is at most 12hr */
  height: max(calc(100vh - var(--height-navbar) - 2rem), 480px);
  transition:
    border-color var(--trans-dur),
    background-color var(--trans-dur),
    color var(--trans-dur);
  border-radius: 8px;
}

@media (max-width: calc(768px - 0.5px)) {
  .calendar {
    height: max(calc(100vh - var(--height-navbar) - 2rem - 72px), 480px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  .calendar {
    position: sticky;
    top: calc(1rem + 56px);
    min-width: calc(75% - 1rem);
    flex-grow: 1;
  }
}

.expandBtn {
  padding: 3px;
  border-radius: 6px;
  background-color: var(--color-bg-button);
  color: var(--color-text-secondary);
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 2;
  transform: translate(50%, -40%);
  transition:
    transform 0.05s linear,
    background-color var(--trans-dur),
    color var(--trans-dur);
}

.expandIcon {
  display: block;
}

.expandBtn:hover {
  transform: translate(50%, -40%) scale(1.1);
}

.calendarSidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .calendarSidebar {
    max-width: calc(25% - 1rem);
  }
}

.dropdowns {
  margin-bottom: -1rem;
}
