.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-top: var(--main-border);
  height: 100%;
  position: relative;
}

.unfocused {
  opacity: .5;
}

.resultsList {
  overflow-y: auto;
  width: 100%;
  min-width: 250px;
}

.preview {
  flex-grow: 2;
  padding: 10px 10px 20px 10px;
  background-color: var(--main-background-color);
  align-items: center;
  display: flex;
  max-height: 100%;
  position: absolute;
  left: 250px;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  /*
    Instead of using `justify-content: center` we have to use this hack.
    In this case child element that is bigger than `.preview ` will be placed on left border
    instead of moving outside of container
   */
  &::before, &::after {
    content: '';
    margin: auto;
  }

  &:empty {
    display: none;
  }

  input {
    border: var(--preview-input-border);
    background: var(--preview-input-background);
    color: var(--preview-input-color);
  }

  :global {
    /* Styles for react-select */
    .Select {
      .Select-control {
        border: var(--preview-input-border);
        background: var(--preview-input-background);
        color: var(--preview-input-color);
      }
      .Select-menu-outer {
        border: var(--preview-input-border);
        background: var(--preview-input-background);
      }
      .Select-input input {
        border: 0;
      }
      .Select-value-label {
        color: var(--preview-input-color) !important;
      }
      .Select-option {
        background: var(--preview-input-background);
        color: var(--preview-input-color);
        &.is-selected {
          color: var(--selected-result-title-color);
          background: var(--selected-result-background);
        }
        &.is-focused {
          color: var(--selected-result-title-color);
          background: var(--selected-result-background);
          filter: opacity(50%);
        }
      }
      .Select-option.is-selected {
      }
    }
  }
}
