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

.session-header {
  background-color: c.$culturedGrey;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(constants.$golden-ratio-large * 1rem) 0
    calc(constants.$golden-ratio-small * 1rem) 0;

  @include m.for-tablet-and-up {
    flex-direction: row;
  }

  .session-publication {
    @include m.for-laptop-and-up {
      text-align: right;
    }
  }

  .title {
    @include m.ilios-heading-h5;
    flex-grow: 2;

    input {
      width: 90%;
    }
  }
}

.session-overview {
  @include m.ilios-overview(c.$tealBlue);
  border-bottom: 1px dotted c.$tealBlue;

  .last-update {
    color: c.$davysGrey;
    margin-right: 1rem;
    text-align: right;
  }

  .session-overview-header {
    @include m.ilios-overview-header;

    .title {
      @include m.ilios-overview-title;
    }

    .session-overview-actions {
      @include m.ilios-overview-actions;

      a {
        @include m.font-size("medium");
        margin-right: 0.5rem;
      }
    }
  }

  .session-overview-content {
    @include m.ilios-overview-content;
  }

  .block {
    @include m.ilios-overview-block;
  }

  .sessiontype {
    grid-column: 1 / -1;

    select {
      max-width: 80%;
      @include m.for-phone-only {
        max-width: 125px;
      }
    }
  }

  .independentlearningcontrol,
  .prerequisites,
  .postrequisite,
  .session-overview-ilm-duedate {
    grid-column: 1/-1;
  }

  hr {
    background: 0;
    grid-column: 1 / -1;
    height: 0;
    margin: 1rem;
  }

  .sessiondescription,
  .instructional-notes {
    @include m.ilios-browser-defaults;
    grid-column: 1 / -1;
    margin-top: 1em;
  }

  .sessionassociatedgroups {
    grid-column: 1 / -1;
  }

  .fa-copy {
    color: c.$fernGreen;
  }

  .post-requisite-edit {
    @include m.ilios-link-button;
  }

  @include m.for-desktop-and-up {
    .session-overview-ilm-duedate {
      grid-column: 2 / -1;
    }
  }
}
