.search-trigger
{
    color: $gray-600;
    max-width: 300px;

    @include media-breakpoint-up(md)
    {
	border: 2px solid $gray-300;
	border-radius: 3rem;
	padding: .6rem 1.2rem;
	flex-grow: 1;
    }

    @include media-breakpoint-up(lg)
    {
	padding: .6rem 1.2rem;
    }

    .icon
    {
	fill: black;
	height: 20px;
	width: 20px;

	@include media-breakpoint-up(md)
	{
	    fill: $gray-600;

	    height: 18px;
	    width: 18px;
	}
    }

    &:hover
	{
	border-color: $gray-600 !important;
	color: $gray-600;
    }
}

.search-modal
{
    @include media-breakpoint-down(sm)
    {
	background: #fff;
    }

    .modal-dialog
    { 
	@include media-breakpoint-down(sm)
	{
	    margin: 0;
	    min-height: 100%;
	    display: block;
	}
    }

    .modal-content
    {
	border-radius: 0;
	border: none;

	@include media-breakpoint-up(md)
	{
	    border-radius: 16px;
	}

	.modal-body
	{
	    @include media-breakpoint-down(sm)
	    {
		padding: 2rem 1rem;
		position: fixed;
		height: 100%;
	    }

	    @include media-breakpoint-up(md)
	    {
		position: relative;
		padding: 2.6rem 1.9rem;
	    }

	    .search
	    {
		.search-form
		{
		    border-radius: 3rem;
		    border: 2px solid $gray-300;
		    padding: 0.75rem 1.2rem;
		    width: 100%;

		    .form-control
		    {
			border: none;
			background: transparent;
		    }

		    &:hover
			{
			border-color: $gray-600 !important;
		    }
		}

		.btn-close
		{
		    background: none;
		    height: 42px;
		    width: 42px;
		    border-radius: 50%;
		    display: flex;
		    align-items: center;
		    justify-content: center;  
		    flex: none;

		    @include media-breakpoint-up(xl)
		    {
			height: 46px;
			width: 46px;
		    }

		    &:hover
			{
			background: $gray-300;
		    }
		}

	    }

	    .search-categories-wrapper
	    {
		@include media-breakpoint-down(sm)
		{
		    height: 80%;

		    overflow: auto;

		    &::-webkit-scrollbar 
		    {
			width: 2px;
		    }

		    &::-webkit-scrollbar-track 
		    {
			background: #EBEBEB;
			border-radius: 2rem;
		    }

		    &::-webkit-scrollbar-thumb 
		    {
			-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
			border-radius: 2rem;
			background: $primary;
		    }
		}

		.recipes-categories
		{
		    .btn
		    {
			margin: 4px 2px;
		    }
		}
	    }


	}
    }

}


.btn-close
{
    opacity: 1 !important;
    :focus
	{
	box-shadow: none !important;

    }
}

.login-btn
{
    padding: .6rem 1.2rem;
}