ilios/frontend

@use "../ilios-common/colors" as c;
@use "../ilios-common/mixins" as m;

.school-vocabulary-term-manager {
  .school-vocabulary-term-manager-properties {
    display: grid;
    grid-gap: 0.5rem;
    padding: 0.8rem;

    label {
      @include m.ilios-label;
      margin: 0 0.5rem 0 0;
    }

    .block {
      align-items: baseline;
      display: flex;
      margin-bottom: 1rem;

      .editinplace {
        margin-left: 0.5rem;
      }

      &.term-title {
        @include m.ilios-heading-h4;
      }

      &.term-description {
        textarea {
          @include m.ilios-textarea;
        }
      }
    }
  }

  .terms {
    background-color: c.$white;
    border: 1px solid c.$blueMunsell;
    height: 10rem;
    margin-bottom: 1rem;
    overflow-y: scroll;
    padding: 0.5rem;
    width: 80%;

    .saved-result {
      border: 1px solid c.$fernGreen;
      margin: 1rem;
      padding: 1rem;

      @include m.for-laptop-and-up {
        width: 40%;
      }
    }

    .form {
      display: flex;
      margin-bottom: 0.5rem;

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

      button {
        margin-left: 0.5rem;
      }
    }

    ul {
      @include m.ilios-selectable-list;

      em {
        color: c.$crimson;
      }
    }
  }
}