@import '../../client/css/defaults';

$search-input-height: 30px;

.repository--nav--links--search {
	position: relative;

	.repository--nav--links--search--icon {
		position: absolute;
		fill: $border-color;
		height: calc(100% - 4px);
		z-index: 2;
		top: 50%;
		transform: translate(0, -54%);
		left: 0.4em;
		width: 0.6em;
		pointer-events: none;

		svg {
			height: 40%;
		}
	}

	form {
		display: flex;
		align-items: center;
		justify-content: center;

		input {
			@include text-input;

			z-index: 1;
			background: none;
			top: 0;
			left: 0;
			width: 100%;
			line-height: $search-input-height;
			border: solid 0.0625em $border-color;
			background-color: white;
			border-radius: 0.2em;
			height: $search-input-height;
			padding-left: 1.5em;
			padding-right: 1.45em;
			outline: none;
			position: relative;
			-webkit-appearance: none;

			&::-webkit-search-cancel-button {
				-webkit-appearance: none;
			}

			&:focus {
				outline-width: 0;
			}
		}

		button {
			border: 0.1em solid transparent;
			background-color: transparent;
			cursor: pointer;
			width: 0.6em;
			height: 0.6em;
			position: absolute;
			right: -0.75em;

			&::after {
				content: '';
				width: 0.6em;
				height: 0.6em;
				position: absolute;
				background-color: white;
				z-index: 1;
				right: 1.25em;
				top: 0;
				bottom: 0;
				margin: auto;
				padding: 0.125em;
				border-radius: 50%;
				font-size: 1.1em;
				cursor: pointer;
				background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
			}
		}
	}

	&.is-not-empty {
		/*
		stylelint complains about this rule's specificity, but fixing it would
		require fixing alot more errors
		*/
		// stylelint-disable-next-line no-descending-specificity
		> input {
			border-color: $color-action;
			background-color: $color-action;
			color: white;

			&:-webkit-autofill {
				-webkit-text-fill-color: white;
				-webkit-box-shadow: 0 0 0 1000px $color-action inset;
			}
		}

		.repository--nav--links--search--icon {
			fill: white;
		}
	}

	&.is-empty > input:active,
	&.is-empty > input:hover,
	&.is-empty > input:focus {
		border-color: $color-action;

		+ .repository--nav--links--search--icon {
			fill: $color-action;
		}

		&::placeholder {
			color: $color-action;
		}
	}
}