@import "theme_variables";

#search_widget {
  &.open{
    a.popup-title i:before{
      content: "\e646";
    }
  }
  .popup-content{
    padding: 15px; 
  }
  .search-inner{
    position: relative;
    input[type="text"]{
      height: 40px;
      line-height: 40px;
      padding: 0;
      min-width: 220px;
      border: 0;
      outline: none;
      border-bottom: 1px solid #ccc;
      color: #000;
      @include rtl-padding(0,40px,0,0);
      &:focus{
        border-color: #000;
        &+button[type="submit"]{
          i:before{
            content: "\e628";
          }
        }
      }
    }
    button[type="submit"]{
      position: absolute;
      top: 0;
      right: 0;
      border: 0;
      padding: 0;
      width: 40px;
      height: 40px;
      background: none;
      outline: none;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      i{
        vertical-align: middle;
        font-size: 21px;
        color: #000;
      }
      &:hover{
        i:before{
          content: "\e628";
        }
      }
    }
  }
}
#checkout {
  #search_widget {
    display: none; /* Not ideal solution by allows to reuse same hooks/templates */
  }
}

#pagenotfound {
  .page-content {
    #search_widget {
      width: 100%;
      .popup-content{
        position: relative;
      }
    }
  }
}
#main{
  #search_widget{
    a.popup-title{
      display: none;
    }
    .popup-content{
      position: static;
      display: block !important;
      @include opacity(1);
      width: 100%;
      float: none;
      @include box-shadow(none);
      z-index: 1;
    }
    .search-inner{
      position: relative; 
    }
    input[type=text]{
      @include rtl-padding(0,50px,0,0);
      height: 40px;
      line-height: 1;
      outline: 0;
      &:focus{
        border-color: $theme-color-default;
      }
    }
    button[type=submit]{
      width: 40px;
      height: 40px;
      bottom: 0;
      top: auto;
      @include rtl-right(0);
      background: none;
      color: #333;
      i{
        font-size: 14px;
      }
      &:hover{
        background: $theme-color-default;
        color: #fff;
      }
    }
  }
}