/************************************************************************************

DevPortal Search

**************************************************************************************/

@import 'base';

.dp-navbar-search-form {

float: right;
display: inline-block;
margin-bottom: 0;

@include desktop {
    float: none;
    width: 70px;
    height: 70px;
    border-left: 1px solid $navBorderColor;
    border-bottom: 1px solid $navBorderColor;
    position: absolute;
    right: -30px;
    transition: all 0.25s ease-in;
    background: #fff;
    z-index: 100;
}

@include desktop-large {
    right: 60px;
}

}

.dp-navbar-search-form–isActive {

@include desktop {
    transform: translateX(0);
    -ms-transform: translateX(0);
    width: 275px;
}

@include desktop-large {
    width: 385px;
}

}

.dp-navbar-search-wrapper {

position: absolute;
left: 10px;
right: 10px;
height: 48px;
padding: 8px;
top: 0px;
z-index: 210;
margin-left: 40px;
background: $preLoginBackgroundColor;
overflow: hidden;
visibility: hidden;

@include desktop {
    left: 52px;
    top: 18px;
    padding: 0;
    right: 0px;
    height: auto;
    visibility: visible;
    margin: 0;
    display: block;
    width: 0;
    transition: width 0.25s ease-in;
}

}

input.dp-navbar-search-field {

padding: 7px 30px 7px 10px;
border-radius: 3px;
font-size: 14px;
line-height: 18px;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: $navBorderColor;
color: #222;
height: 34px;
-webkit-appearance: none;

&:focus {
    outline: 0;
    border-color: #febd69;
    box-shadow: none;
    border-radius: 0 3px 3px 0;
}

@include desktop {
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
}

}

.dp-navbar-search-field::-webkit-input-placeholder {

color: #bbb;

}

.dp-navbar-search-field::-moz-placeholder {

color: #bbb;

}

.dp-navbar-search-field:-ms-input-placeholder {

color: #bbb;

}

.dp-navbar-search-button {

position: relative;
top: 3px;
padding: 4px 20px 4px 16px;
border: none;
background-color: transparent;
height: 34px;

&:focus {
    outline: none;
}

@include desktop {
    width: 70px;
    height: 70px;
    padding: 0;
    margin: 0;
    top: 0;
    transition: all 0.15s ease-in, background-color 0.001s,;

    &:hover {
        background-color: #febd69;
    }
}

}

.dp-navbar-search-icon {

height: 24px;
width: 24px;

}

.dp-navbar-search-close-button {

position: absolute;
right: 10px;
font-size: 25px;
padding: 5px 10px;
cursor: pointer;
color: $preLoginTextColor;
line-height: 20px;

&:hover,
&:active,
&:focus {
    color: $link-color-hover;
    text-decoration: none;
}

}

.dp-navbar-search-form–isActive {

.dp-navbar-search-wrapper {
    visibility: visible;

    @include desktop {
        width: auto;
    }
}

.dp-navbar-search-button {
    display: none;
}

@include desktop {

    .dp-navbar-search-button {
        height: 34px;
        padding: 5px 8px;
        width: auto;
        background-color: #febd69;
        border: 1px solid $navBorderColor;
        border-radius: 3px 0 0 3px;
        position: relative;
        top: 18px;
        left: 10px;
        display: block;
    }
}

}