@use "../colors" as c;
@use "../mixins" as m;

.detail-learners-and-learner-groups {
  @include m.detail-container(c.$tealBlue);

  .detail-learners-and-learner-groups-header {
    @include m.detail-container-header;

    .title {
      @include m.detail-container-title;
    }

    .actions {
      @include m.detail-container-actions;
    }
  }

  .detail-learners-and-learner-groups-content {
    @include m.detail-container-content;
    @include m.ilios-form;
    grid-template-columns: 1fr;

    .display-selected-learner-groups,
    .display-selected-learners,
    .learnergroup-selection-manager,
    .learner-selection-manager {
      grid-column: 1 / -1;
    }

    .selected-learner-groups,
    .selected-learners,
    .available-learner-groups,
    .available-learners {
      margin-bottom: 0.5rem;
      label {
        display: inline-block;
        margin-bottom: 0.5rem;
      }
    }
  }
}
