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

.header-search{
  align-items: center;
  background-color: #1f242d;
  border-radius: 100px;
  height: 29.2px;
  justify-content: space-around;
  position: relative;
  width: 191px;
  z-index: 3;

  input{
    border: none;
    background: none;
    color: white;
    font-family: NunitoSans;
    font-weight: 200;
    letter-spacing: 0.3px;
    padding: 5px 0px;
    outline: none;
    flex: 1 0;
    width: 0;
  }
  
  input::-webkit-input-placeholder {
    color: #c8c8c8;
    text-transform: capitalize;
  }

  i{
    color: #c8c8c8;
    font-size: 20px;
    margin: 0 8px;
    cursor: pointer;
    &.icon-exit {
      position: relative;
      right: -15px;
      font-size: 24px;
      font-weight: bold;
      z-index: 11;
    }
  }

  .search-loading-ring {
    pointer-events: none;
    top: 5px;
    left: -15px;
    > div {
      width: 12px;
      height: 12px;
      border-width: 1.8px;
    }
  }

  .header-search-toggle{
    align-items: center;
    display: flex;
    position: relative;

    i{
      color: #0091ff;
      cursor: pointer;
      font-size: 20px;
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_INPUT){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .header-search{
      input{
        border: none;
        background: none;
        color: $_COLOR_TEXT_INPUT;
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_COLOR_TEXT_INPUT_DARK);
@include themable($_THEME_DARK, $_COLOR_TEXT_INPUT_DARK);