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

.learningmaterial-manager {
  margin-left: 2rem;
  min-height: 25vh;

  @include m.ilios-form;

  .item {
    @include m.ilios-form-item;
  }

  .buttons {
    @include m.ilios-form-buttons;
  }

  .copy-btn {
    background-color: c.$fernGreen;
  }

  .notes,
  .description {
    @include m.ilios-browser-defaults;
  }

  .loading {
    @include m.ilios-heading-h1;
    display: block;
    padding: 5vh 0;
    text-align: center;
    width: 100%;
  }

  h2 {
    @include m.ilios-heading;
    color: c.$raisinBlack;
    @include m.font-size("base");
    font-weight: bold;
  }

  .mesh-manager {
    grid-column: 1 / -1;
    margin: 2rem 0;
  }

  .timed-release {
    margin-bottom: 2rem;
    padding-left: 1rem;

    .item {
      margin-top: 1rem;
    }

    p {
      margin: 0;
    }

    button {
      background-color: transparent;
      margin: 0.5rem 0 0;
    }

    .add-date {
      border: 1px solid c.$fernGreen;
      color: c.$fernGreen;
    }

    .remove-date {
      border: 1px solid c.$crimson;
      color: c.$crimson;
    }
  }

  .weblink {
    span {
      @include m.text-wrap;
    }
  }
}
