.str-chat__channel-search {
  --channel-search-input-height: 30px;

  padding: var(--md-p);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: var(--grey-gainsboro);

  input {
    width: 100%;
    background: var(--grey-whisper);
    border: 1px solid transparent;
    outline: none;
    height: var(--channel-search-input-height);
    border-radius: var(--border-radius);
    color: var(--black);
    font-size: var(--md-font);
    padding: var(--sm-p);

    &::placeholder {
      color: var(--grey);
    }

    &:focus {
      background: var(--white);
      border: 1px solid var(--primary-color);
      box-shadow: 0 0 0 2px var(--primary-color-faded);
      transition: all 0.2s ease-in-out;
    }
  }

  &-container {

    padding: 8px;

    &-searching {
      padding-left: 8px;
    }

    &-empty {
      padding-left: 8px;
    }

    .str-chat__channel-search-result {
      display: flex;
      align-items: center;
      border-radius: var(--border-radius-md);
      height: 40px;
      cursor: pointer;
      padding-left: 8px;
      width: 100%;
      border: none;
      background: transparent;

      &:hover {
        font-weight: var(--font-weight-bold);
        transition: all 0.2s ease-in-out;
      }
    }
  }

  &-result.focused {
    font-weight: var(--font-weight-bold);
  }

  &-container.popup {
    border-radius: var(--border-radius-md);
    background: var(--white-smoke);
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: calc(var(--channel-search-input-height) + 40px);
    box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
    border: 1px solid var(--border);

    .str-chat__channel-search-result {
      &:hover {
        background: var(--light-grey);
      }
    }

    .str-chat__channel-search-result.focused {
      background: var(--light-grey);
    }
  }

  &-container.inline {
    width: 100%;
    background: var(--grey-gainsboro);

    .str-chat__channel-search-result {
      &:hover {
        background: var(--white);
      }
    }

    .str-chat__channel-search-result.focused {
      background: var(--white);
    }
  }
}

.dark.str-chat {
  .str-chat__channel-search,
  .str-chat__channel-search-container.inline {
    background: var(--dark-grey);
    color: var(--white);

    input {
      background: var(--grey-gainsboro);
    }

    .str-chat__channel-search-result {
      color: var(--white);

      &:hover {
        background: var(--white5);
      }
    }
  }
}