@import './globals.scss';

.CustomSuggestion {
    $border-color: #dadce0;
    width: 100%;
  
    .input{
      border: 1px solid rgba(69, 69, 69, 0.1);
      border-radius: $border-radius;
    }
  
    input {
      border: none;
      min-height: 30px;
      height: auto;
      overflow-y: auto;
      z-index: 2;
      display: inline-block;
      min-width: 100%;
      clear: both;
      line-height: 20px;
      font-size: 14px;
      color: rgba(69, 69, 69, 0.7);
      box-sizing: border-box;
      padding-left: 2px;
      position: relative;
      box-sizing: border-box;
      padding: 5px 10px;
      top: 0;
      transition-duration: $default-transition;
      min-height: 30px;
    }

    input:focus{
      outline: none;
    }
  
    .suggestions-area {
      position: relative;
      background-color: transparent;
      border-radius: $border-radius;
      box-sizing: border-box;
      z-index: 3;
      width: 100%;
      left: 10px;
      top: 20px;
  
      .ul {
        position: absolute;
        top: -15px;
        left: -10px;
        width: auto;
        border: 1px solid $border-color;
        z-index: 2;
        border-radius: $border-radius;
        background-color: $white;
        margin: 0;
        padding: 0;
        width: 100%;
  
        .suggestions {
          display: block;
          // Each single li`s height = 40px
          // Max height of the suggestions holder are 5 items
          max-height: 200px;
          overflow-x: hidden;
          overflow-y: auto;
          position: relative;
        }
  
        li {
          list-style: none;
          margin: 0;
          padding: 0;
          min-height: 30px;
          line-height: 30px;
          padding: 5px 25px 5px 25px;
          color: rgb(19, 19, 19);
          white-space: nowrap;
          overflow: hidden;
          font-size: 0.87rem;
          text-overflow: ellipsis;

          a{
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: rgb(19, 19, 19);
          }
        }
  
        .active {
          position: relative;
        }
  
        .selected{
            background-color: $dodgerblue-light-xl;
        }
  
        .active:after {
          // content: '\2713';
          content: '✔';
          color: #777;
          font-weight: bold;
          float: right;
          margin-left: 5px;
          position: absolute;
          top: 3px;
          left: 2px;
        }
  
        li:hover {
          cursor: pointer;
          background-color: rgb(199, 199, 199);
        }
      }
    }
  }