/**
 * searchform.css
 *
 * All searchform related styles
 *
 *
**/


/***************************************** Searchform button */

.searchform:after {
    align-items: center;
    color: var(--color-bravo);
    content: "\26B2";
	display: flex;
    font-family: initial;
	font-size: 30px;
    position: relative;
    right: -8px;
	transform: rotate(-45deg);
    top: 1px;
	z-index: 9;
}

/************************************************** Searchform */

.searchform {
    background-color: #fff;
    border-radius: var(--size__border-radius-small);
    display: flex;
    height: 35px;
	opacity: 0;
    position: relative;
}

.searchform > label {
    flex: 1;
    max-width: calc( 100% - 35px );
}

.searchform--searchfield {
    background-color: transparent;
    border: none;
    color: #202020;
    font-family: var(--font-family-markot);
	font-size: var(--step-1);
	height: 35px;
	padding: 0 0 0 var(--size__inline-gutters);
    width: 100%;
}

.searchform--searchfield:focus,
.searchform--searchfield:active {
	outline: 0 !important;
}

.searchform--searchfield::placeholder {
	color: var(--color-bravo);
}

.searchform--submit {
	background: none;
    border: 0;
    box-shadow: none !important;
	cursor: pointer;
    height: 35px;
    min-width: 0;
    margin: 0;
    position: absolute;
    padding: 0;
    right: 0;
    text-indent: -9999px;
    width: 35px;
	z-index: 10;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


/******************************************************************************* Media Queries */
@media screen and (min-width: 1024px) {
    
	.searchform {
		border: 1px solid var(--color-bravo);
		margin-left: calc(var(--size__inline-gutters) / 2);
		margin-top: 0;
		margin-bottom: 0;
		width: 155px;
	}

	.searchform--searchfield {
        width: 118px;
	}

}