@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
@mixin shadowBox ($OffsetX, $OffsetY, $blurRadius, $spreadRadius, $colorShadow ){ 
  -webkit-box-shadow: $OffsetX $OffsetY $blurRadius $spreadRadius $colorShadow;
  -moz-box-shadow: $OffsetX $OffsetY $blurRadius $spreadRadius $colorShadow;
  box-shadow: $OffsetX $OffsetY $blurRadius $spreadRadius $colorShadow;
}

/* offset-x > | offset-y ^|*/
@mixin overFlow ($overStyleX, $overStyleY){
    overflow-x: $overStyleX;
    -webkit-overflow-x: $overStyleX;
    overflow-y: $overStyleY;
    -webkit-overflow-y: $overStyleY;
}

$width-search: 300px;
$color-nav: #ffffff;
$placeholder-nav:  rgba (68, 68, 68, 0.705);
$base-font-size: 1.0em;

.search-div{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 5px;
  
}

.link-div{
    width: 100%;
    height: 100%
}

input{


    .&.nv-search[type=text]
     {
        width: $width-search;
        height: 40px;
        box-sizing: border-box;
        border: 0px solid $color-nav;
        border-radius: 20px;
        font-size: $base-font-size;
        background-color: $color-nav;
        padding: 10px 10px 10px 40px;
        /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
        @include shadowBox(2px, 2px, 6px, 0px,  rgba(68, 68, 68, 0.705));
        -webkit-transition: width 0.3s ease-in-out;
        transition: width 0.3s ease-in-out;
        outline: none;
        transition: .3s;
    }
    &.nv-search {
        
        &::placeholder {
            /* Most modern browsers support this now. */
            color: $placeholder-nav;
            opacity: 1;
        }
      
        &[type=text]:focus {
            background-color: $color-nav;
            -webkit-transition: width 0.3s ease-in-out;
            transition: width 0.3s ease-in-out;
            border-radius: 0px;
            transition: .3s;
        }
    }
}

.dropdown-search {
    display: none;
    width: $width-search;
    height: 200px;
    position: absolute;
    top: 53.2px;  
    z-index: 1;   
    background-color: #ffffff;
    transition: .3s;
    cursor: pointer;
    /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
    @include shadowBox(2px, 2px, 6px, 0px,  rgba(68, 68, 68, 0.705));
   /* offset-x > | offset-y ^ */
    @include overFlow(auto, auto);
  }
  
    ul {
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {      
        padding: 15px;
        background-color: #ffffff;}

        &:hover {
            background-color: rgba(185, 185, 185, 0.699);
            transition: .3s;
        }
    }
    a {
        font-family: 'Roboto';
        text-decoration: none;
        color: rgba(68, 68, 68, 0.705);
        font-size: $base-font-size;
    }
}