gistfile1.txt

.navbar__mobile-search__close {
	display: none;


	@include mq($nav-02) {
		@include input-default;
		display: block;
		@include absolute(20px 20px n n);
		@include size(20px);
		background: #fff;
		border-radius: 50%;

		&:after,
		&:before {
			width: 2px;
			background: $black;
			transform-origin: center center;
			@include pseudo(21% 50% 20% n);
			margin-right: -1px;
		}

		&:before {
			transform: rotate(-45deg);
		}

		&:after {
			transform: rotate(45deg);
		}
	}
}

.navbar__mobile-search {
	display: block;
	position: relative;
	padding-right: 70px;

	@include mq($nav-02) {
		padding: 0 60px;
		height: 200px;
		background-color: $black;
		// border-bottom: solid #ffffff 2px;
		display: none;
		text-align: center;
		@include absolute(130px n n 50%);
		width: 100vw;
		margin-left: -50vw;
		transform-origin: 50% 0;

		.article-page & {
			top: 119px;
		}

		.js-search-is-open & {
			display: block;
			animation-name: fade-in;
			animation-duration: .2s;
			animation-fill-mode: forwards;
		}
	}
}

.navbar__mobile-search__input {
	@include input-default;
	width: 100%;
	padding: 14px 0 13px 3px;
	@include font($sans, $size: 16px, $weight:400);
	@include placeholder-state($default: $black, $hover: #222, $focus: #999);

	&:focus {
		outline: 0;
	}

	@include mq($nav-02) {
		max-width: 900px;
		margin: 45px auto 0;
		background-color: $black;
		padding: 20px 0 0;
		border: 0;
		border-bottom: solid #ffffff 1px;
		@include font($sans, $size: 55px, $weight:300);
		letter-spacing: 1px;
		color: #ffffff;
		transition-delay: .1s;
		@include placeholder-state($default: #fff, $hover: #ddd, $focus: #999);

		&:focus,
		&:active {
			outline: none;
		}
	}
}

.navbar__mobile-search__button {
	@include input-default;
	@include absolute(0 0 0 n);
	width: 45px;
	background-size: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url('/_/img/mag-small.svg');

	@include mq($nav-02) {
		height: 45px;
		background-image: url('/_/img/mag-big--white.svg');
		background-size: contain;
		right: 70px;
		top: 70px;
	}

	@include mq(1020px) {
		right: auto;
		left: 50%;
		margin-left: 400px;
	}
}