<label for="search-status" data-auto-focus=".m-search__input">
	<i class="icon-search" aria-hidden="true"></i>
</label>

<input type="checkbox" id="search-status" class="d-none">

<div class="m-search search-for-open">
	<div class="m-search__window">
		<div class="m-search__container">
			<form action="." method="POST">
				<div class="row align-items-center">
					<div class="col-16 text-left">
						<label for="frm-pc-form-q">Search</label>
					</div>
					<div class="col-8 text-right">
						<label for="search-status" class="m-search__icon m-search__close">
							<span aria-hidden="true">&#10005;</span>
						</label>
					</div>
					<div class="col-24 jq_valid_input">
						<div class="m-search__block">
							<div class="w-100">
								<input placeholder="Type &amp; hit enter..." name="q" id="frm-pc-form-q" class="m-search__input a-form-input">
							</div>
							<span class="m-search__submit">
								<i class="m-search__icon icon-search" aria-hidden="true"></i>
								<input type="submit" class="m-search__action" name="action" id="frm-pc-form-action">
							</span>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

@import "atoms/form-input/index";

.m-search {

    $self: &;
    $status: '#search-status:checked + .search-for-open';

    display: inline-block;

    &__window {

        align-items: center;
        background: transparentize(color('white'), .2);
        display: flex;
        height: 100%;
        left: 100%;
        overflow: auto;
        padding: ($grid-gutter-width / 2);
        position: fixed;
        text-align: left;
        top: 0;
        transition: $base-transition;
        width: 100%;
        z-index: 11;

        #{$status} & {

            left: 0;

        }

    }

    &__container {

        margin-left: auto;
        margin-right: auto;
        max-width: map-get($container-max-widths, sm);
        padding-left: ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
        text-align: center;
        width: 100%;

    }

    &__block {

        border: 1px solid color('gray');
        display: table;
        font-size: 0;
        position: relative;
        transition: $base-transition margin;
        white-space: nowrap;
        width: 100%;

        > * {

            @include font-size(normal);
            display: table-cell;
            vertical-align: middle;

        }

    }

    & #{&}__input {

        border: 0;
        margin: 0;

        &:focus {

            box-shadow: none;

        }

    }

    &__submit {

        background: color('gray');
        border: 0;
        min-width: em(40px);
        padding: 0 em(15px);
        position: relative;
        text-align: center;
        transition: $base-transition color;

        &:hover {

            color: color('white');

        }

        @media(min-width: breakpoint-min(lg)) {

            @include font-size(large);
            min-width: em(70px, large);

        }

    }

    &__icon {

        @include font-size(large);
        display: inline-block;

    }

    &__close {

        cursor: pointer;
        transition: $base-transition color;

        &:hover,
        &:focus {

            box-shadow: none;
            color: color('black');

        }

    }

    &__action {

        background: transparent;
        color: transparent;
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;

    }

}