.requests {
  --header-height: 50px;

  display: grid;
  grid-template-rows: var(--header-height) 0fr;
  transition: 0.3s ease-out;
  grid-column: 1 / -1;
}

.toggle {
  display: grid;
  grid-template-areas:
    "header chevron"
    "divider divider";
  grid-template-columns: 1fr auto;
  background-color: transparent;
  gap: var(--Spacing-x1);
  border: none;
  width: 100%;
  cursor: pointer;
  margin: var(--Spacing-x2) 0;
}

.header {
  grid-area: header;
  align-self: flex-start;
}

.chevron {
  grid-area: chevron;
}

.divider {
  grid-area: divider;
  border-top: 1px solid var(--Color-gray-300);
}

.requests[data-requests-open="true"] .chevron {
  transform: rotate(180deg);
}

.content {
  overflow: hidden;
}

.contentWrapper {
  padding-top: var(--Spacing-x3);
  display: grid;
  gap: var(--Spacing-x2);
  width: 100%;
}

.requests[data-requests-open="true"] {
  grid-template-rows: var(--header-height) 1fr;
}