$color_white: #fff;
$color_black: #000;

.header {
	background-color: $color_black;
	color: $color_white;
	padding: 20px 20px 0;

	@media screen and (min-width: 500px) {
		position: relative;
	}

	&:after {

		@media screen and (min-width: 500px) {
			clear: both;
			content: '';
			display: table;
		}
	}

	h1 {
		color: $color_white;

		@media screen and (min-width: 500px) {
			float: left;
		}
	}

	button {
		margin-left: 0;

		@media screen and (min-width: 500px) {
			float: right;
		}
	}

	> div {

		@media screen and (min-width: 500px) {
			justify-content: flex-end;
			left: -28px;
			top: 10px;

			label {
				position: static;
				left: 0;
				margin-right: 6px;
				max-width: none;
				width: auto;
			}

			.input-group__input {
				display: block;
				flex: 0;
				width: 20px;
			}
		}
	}
}