@import "../variables/_all";
@import "./list";
@import "./loading";

.tag-list {
  &.tag-list-wrap {
    .tag-list-inner {
      flex-wrap: wrap;
    }
  }
}

.tag-list-heading {
  color: $light-text-color;
  font-size: smaller;
  padding: 8px 8px;
}

.tag-list-inner {
  display: flex;
}

.tag-list-item {
  margin: 4px;

  .ap-button {
    padding: 2px 16px;
    font-size: 14px;
  }
}

.tag-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  margin-right: 8px;
  border: 1px solid $tag-editable-border-color;
  padding: 2px 4px;
}

.tag-label-text {
  &:link, &:visited {
    color: inherit;
  }
}

.tag-label-button {
  &.ap-button {
    flex-shrink: 0;
    padding: 4px;
    color: $tag-editable-button-color;
    margin: 0;
    cursor: pointer;
  }
}

.tag-label-list {
  margin: 8px 0;
}

.tag-label-list-alt {
  @extend .list-alt;
}

.tag-form {
  $tag-form-height: 28px;
  font-size: 14px;
  margin: 4px 0;
  .inline-form {

  }
  [type=text] {
    height: $tag-form-height;
    box-sizing: border-box;
  }
  .submit-button {
    padding: 4px;
    font-size: 12px;
    height: $tag-form-height;
    box-sizing: border-box;
  }
}

.tag-link {
  color: inherit;
  display: inline-block;
  margin-right: 4px;
}

.tag-loading {
  @extend .loading;
}

.tag-label-others-list {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 84px;
}

.tag-label-list-selectable {
  .tag-label {
    cursor: default;
  }
}