/*
  Inline Labels Editor
  ------------------------------------------------------------------------------
*/

.inline-labels--editor {
  min-height: 18px;
  position: relative;
  display: flex;
  align-items: center;
}

.inline-labels--add-wrapper {
  display:flex;
}

.inline-labels--popover {
  width: 330px;
}

.inline-labels--popover-heading {
  margin-top: 0;
  user-select: none;
  text-align: center;
  color: $g13-mist;
  margin-bottom: $cf-marg-c;
}

.inline-labels--list-container {
  background-color: $g3-castle;
  border-radius: $radius;
  margin-top: $cf-marg-a;
  overflow: hidden;
}

.inline-labels--list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.inline-labels--list-item,
.inline-labels--create-new {
  padding: $cf-marg-a $cf-marg-b;
  min-height: $cf-form-sm-height;
  font-size: $cf-form-sm-font;
  display: flex;
  align-items: center;
}

.inline-labels--list-item {
  &.active {
    background-color: $c-pool;
  }

  &.active,
  &:hover {
    cursor: pointer;
  }
}

.inline-labels--create-new {
  line-height: $cf-form-sm-font;
  font-weight: $cf-font-weight--medium;
  color: $g11-sidewalk;
  transition: background-color 0.25s ease, color 0.25s ease;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;

  strong {
    display: inline;
    font-weight: $cf-font-weight--bold;
    color: $g15-platinum;
  }

  &.active {
    color: $c-neutrino;

    strong {
      color: $g20-white;
    }
  }
}
