ilios/frontend

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

.mesh-manager {
  .deprecated {
    color: c.$crimson;
    font-weight: bolder;
  }

  .results,
  .mesh-search-results {
    @include m.ilios-list-reset;
  }

  .mesh-search-results {
    @include m.ilios-selectable-list;

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

    button {
      @include m.ilios-button-reset;
      text-align: left;
    }

    .descriptor-name {
      display: block;
      font-weight: bold;
    }

    .descriptor-id {
      display: block;
      @include m.font-size("small");
    }

    .mesh-concepts {
      color: inherit;
      list-style: disc inside;

      .truncated::after {
        content: " \2026";
      }
    }
  }

  .selected-terms {
    @include m.ilios-tag-list;
    margin-bottom: 2rem;

    li {
      display: flex;

      button {
        @include m.ilios-button-reset;
      }
      .remove {
        margin-left: 0.5em;
      }
    }

    .term-title {
      font-weight: bold;
    }

    .term-details {
      font-style: italic;
    }
  }

  .mesh-search {
    padding-bottom: 0.5rem;

    input[type="search"] {
      @include m.ilios-input;
    }

    label {
      @include m.ilios-label;
    }
  }
}