@import "./../styles/index.scss";

.header-search .menu-container.menu-arrow.arrow-top-left{
  &:before, &:after{
    left: 16px;
  }
}

.search-hints{
  width: 552px;

  .match-string{
    font-weight: bold;
  }

  .search-hints-error{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #d26054;
    font-size: 13px;

    > div:first-child{
      transform: rotateZ(90deg);
    }
  }

  .search-hints-success{
    margin-top: 10px;
    margin-bottom: 5px;

    .search-recent{
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 30px;

      i{
        font-size: 16px;
        margin: 5px 15px 5px;
      }

      span {
        font-size: 12px;
        margin: 5px 0 5px;
        padding: 0;
      }
    }

    .search-mail{
      cursor: pointer;
      display: flex;
      align-items: center;

      i{
        margin: 0 12px;
        font-size: 20px;
        color: #6a707e;
      }

      > div{
        border-top: 1px solid #d8d8d8;
        display: flex;
        flex: 1 0;
        flex-direction: row;
        font-size: 12px;
        justify-content: space-between;
        margin-right: 20px;
        overflow: hidden;
        padding: 10px 0px;

        div{
          display: flex;

          &:first-child{
            display: flex;
            flex-direction: column;
            margin-right: 15px;
            text-align: left;
            width: calc(100% - 115px);

            span{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          &:last-child{
            align-items: center;
            justify-content: flex-end;
            width: 100px;
          }
        }
      }
    }    
  }
}

/* THEME
   ----------------------------- */
   @mixin themable($_THEME, $_COLOR_TEXT_SEARCH_HINT, $_BACKGROUND_COLOR_SEARCH_HOVER){
    [data-theme^=#{$_THEME}],
    [data-theme] [data-theme^=#{$_THEME}] {
      .search-hints{
        .search-hints-success{
          .search-recent,
          .search-mail {
            i {
              color: $_COLOR_TEXT_SEARCH_HINT;
            }
      
            span {
              color: $_COLOR_TEXT_SEARCH_HINT;
            }

            &:hover {
              background-color: $_BACKGROUND_COLOR_SEARCH_HOVER;
            }
          }
        }
      }
    }
  }
    
  @include themable($_THEME_LIGHT, $_COLOR_TEXT_SEARCH_HINT_LIGHT, $_BACKGROUND_COLOR_SEARCH_HOVER_LIGHT);
  @include themable($_THEME_DARK, $_COLOR_TEXT_SEARCH_HINT_DARK, $_BACKGROUND_COLOR_SEARCH_HOVER_DARK);
  