.ContentSelector-search,
.ContentSelector-edit,
.ContentSelector-clear {
  .Icon.is-s;

  text-decoration: none;
  vertical-align: top;
}

[data-dashboard-widget-url*='brightspot.community.tool.widget.CommunityModerationWidget']
  .ContentSelector-search {
  display: none; // Hides the extra content selector UI in this context (an additional username).
}

.ContentSelector-search > figure > img {
  max-height: 30vh;
}

.ContentSelector-edit,
.ContentSelector-clear {
  .IconButton;

  &:not(.is-visible) {
    display: none;
  }
}

.ContentSelector-edit {
  --IconButton-name: 'edit';
}

input[data-read-only='true'] ~ .ContentSelector-edit {
  --IconButton-name: 'remove_red_eye';
}

.ContentSelector-clear {
  .IconButton.is-red;

  --IconButton-name: 'clear';
}

// Text only.
:is(btu-input, input[data-previewable='false']) + .ContentSelector-search {
  .IconButton;

  --IconButton-name: 'search';
}

// Image preview available.
input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
[data-image-editor='true'] > .ContentSelector-search {
  .TextInput;

  color: var(--color-black);
  display: inline-block;
  overflow: hidden;
  padding-right: calc(var(--gap-s) * 2 + var(--Icon-size));
  position: relative;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 50%;

  &::after {
    .Icon;

    content: 'search';
    position: absolute;
    right: var(--gap-s);
    top: var(--gap-s);
  }

  &:hover {
    text-decoration: none;

    &::after {
      color: var(--Input-focusColor);
    }
  }
}

:not([data-image-editor]),
.RCIG-item.is-gridItem [data-image-editor] {
  > input[data-previewable='true'][data-preview]:not([data-preview=''])
    + .ContentSelector-search {
    color: var(--color-black);
    display: inline-block;
    margin-right: var(--gap-s);
    max-width: calc(100% - var(--gap-s) * 5 - var(--Icon-size) * 2);
    position: relative;

    &::before {
      background: var(--color-white);
      border-bottom-left-radius: 100%;
      content: '';
      height: calc((var(--Icon-size) + var(--gap-xs)) * 1.41421356237);
      position: absolute;
      right: 0;
      top: 0;
      transition: all var(--time-s) var(--ease-out);
      width: calc((var(--Icon-size) + var(--gap-xs)) * 1.41421356237);
    }

    .ContentSelector-placeholder {
      aspect-ratio: ~'2 / 1';
      background: var(--color-gray1);
      display: block;
      max-width: 100%;
      padding: var(--gap-s);
      width: 300px;
    }

    &::after {
      .Icon;

      content: 'search';
      position: absolute;
      right: 0;
      top: 0;
    }

    &:hover {
      text-decoration: none;

      &::before {
        background: var(--color-dominant2);
        border-radius: 50%;
        height: calc(var(--gap-s) * 2 + var(--Icon-size));
        right: calc(0px - var(--gap-s));
        top: calc(0px - var(--gap-s));
        width: calc(var(--gap-s) * 2 + var(--Icon-size));
      }

      &::after {
        color: var(--Link-hoverColor);
      }
    }

    ~ .ContentSelector-clear,
    ~ .ContentSelector-edit,
    ~ .ContentSummary-info,
    ~ .MultiSortable-buttonToggle,
    ~ .RCS-remove {
      position: relative;
      top: calc(0px - var(--gap-s));
    }
  }
}

.ContentSelector-edit.is-disabled ~ .RCS-remove {
  top: 0;
}

// Disabled.
.ContentSelector-edit.is-disabled,
.ContentSelector-search.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

// Removing.
.ComboInput.is-removing {
  --Input-borderColor: var(--color-red1);

  background: var(--color-red1);
  color: var(--color-red6) !important;
  pointer-events: none;
  text-decoration: line-through;

  .ComboInput-icon::after {
    display: none;
  }
}

// Removing - text only.
input[data-previewable='false'] + .ContentSelector-search.is-removing {
  opacity: 0.3;
  pointer-events: none;
}

// Removing - image preview available.
input[data-previewable='true'] + .ContentSelector-search.is-removing {
  --Input-borderColor: var(--color-red1);

  opacity: 0.3;
  pointer-events: none;

  figcaption {
    color: var(--color-red6) !important;
    text-decoration: line-through;
  }
}

.ContentSelector-clear.is-removing {
  .Link.is-blue;

  --IconButton-name: 'undo';
}

.ContentSelector-select ~ .RCS-remove {
  top: 0;
}

.ContentSelector-placeholder {
  color: var(--Input-placeholderColor);
  font-style: italic;
  padding-right: 2px;
}

.Dropdown-button {
  .IconButton;

  --IconButton-name: 'more_horiz';

  &.is-active {
    .IconButton.is-focus;

    --IconButton-name: 'close';
  }
}

.Dropdown-container {
  display: inline-block;

  .Dropdown {
    min-width: 120px;
  }

  a.ContentSelector-clear:hover,
  a.removeButton:hover {
    background-color: transparent;
  }

  .RCIG-swap,
  .copyButton,
  .removeButton,
  .ContentSelector-clear,
  .ContentSelector-edit {
    --Link-color: var(--color-black);
    --Link-hoverColor: var(--color-black);

    &:focus::after {
      opacity: 0;
    }
  }
}

.RCIG-item,
.EIG-item {
  > btu-dropdown {
    position: absolute;
    right: var(--gap-xl);
    top: var(--gap-xs);
  }
}

.RCIG-item.Sortable-item.toggleVisible {
  > btu-dropdown {
    right: calc(var(--gap-m) * 4 + var(--Icon-size));
  }
}

input[data-preview]:not([data-preview='']) {
  ~ btu-dropdown {
    margin-top: -11px;
  }
}
