AlchemyCMS/alchemy_cms

.tag-list {
  display: flex;
  flex-direction: column;
  height: 100%;

  .alchemy-dialog-body & {
    max-height: 316px;
  }

  alchemy-list-filter {
    margin: 0;

    input {
      background-color: transparentize($white, 0.25);

      &:focus {
        background-color: $white;
      }
    }
  }

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    li {
      display: block;

      &:first-child {
        margin-top: 0;
      }

      a {
        @include tag-base;
        text-decoration: none;
        display: flex;
      }

      &:hover {
        background-color: $very-light-blue;
      }

      &.active {
        a {
          background-color: $dark-gray;
          color: $light-gray;

          &:before {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.95)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
          }
        }
      }
    }
  }
}

.tag {
  @include tag-base(
    $margin: $default-margin/2 0,
    $padding: $default-padding 2 * $default-padding $default-padding
  );
  pointer-events: none;
  font-size: $small-font-size;
}

.tags .list .tag {
  padding: 0;
}

#assign_image_list {
  .tag-list ul {
    height: 316px;
  }

  &.filtered .tag-list ul {
    height: 292px;
  }
}

#assign_file_list {
  .tag-list ul {
    height: 396px;
  }

  &.filtered .tag-list ul {
    height: 372px;
  }
}

#overlay_file_list.with_tag_list {
  padding-right: 234px;
}

#tags_tag_list {
  alchemy-list-filter {
    margin-top: 0;
  }

  ul.tags {
    max-height: 10em;
    padding: 1px;
    margin: 0;
    margin-top: 2px;
    overflow: auto;
    text-align: left;
    list-style-type: none;

    li {
      background-color: $medium-gray;
      padding: 4px;
      margin: 0 0 4px 0;
      position: relative;
      border-radius: $default-border-radius;

      &.odd {
        background-color: #eaf3f9;
      }

      input {
        position: absolute;
        top: 3px;
        left: 4px;
      }

      label {
        display: inline-block;
        margin-left: 2em;
        line-height: 1.6em;
      }
    }
  }
}

.tag_list,
.autocomplete_tag_list {
  .select2-container.select2-container-multi {
    .select2-search-choice {
      padding: $default-padding 22px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
      background-repeat: no-repeat;
      background-position: 6px;
      background-color: $medium-gray;
      background-size: 1rem;

      > div {
        position: relative;
        top: -1px;
      }
    }
  }
}