.reservation-dialog-content,
.pickup-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 2rem;
  gap: 1rem;

  min-width: 400px;

  header {
    display: flex;
    justify-content: space-between;
    width: 100%;

    h3 {
      font-size: 1.25rem;
    }
  }
}

.pickup-dialog-content {
  .pickup-orders {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    list-style: disc;
    padding-left: 1rem;

    .order-id {
      font-weight: bold;
    }
  }
}

.drawer-size-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  label {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;

    span {
      text-transform: uppercase;
    }
  }

  input {
    width: 2.5rem;
    height: 1.5rem;
    justify-self: flex-end;
    align-self: center;
  }
}

.confirm-button {
  padding: 8px 16px;
  background-color: #316fa8;
  color: white;

  border: 1px solid #316fa8;
  border-radius: 4px;

  width: 100%;

  &:hover,
  &:focus {
    background-color: #1f4a7d;
  }

  &:focus {
    outline: 1px solid black;
    outline-offset: 1px;
  }
}

.pickup-date-container,
.pickup-quantity-container {
  display: flex;
  flex-direction: column;

  input[type="number"] {
    width: 3rem;
  }
}