@import (reference) "../../../App/common.less";

.modal-content#media-collection > #media-collector > header {
	border-bottom: 0.5px solid #292929;

	& > nav {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		align-items: center;
		/** for ellipsis, hip hip, hooray! **/
		overflow: hidden;

		&.allow-back-nav {
			& .back ~ span {
				margin-left: 5px;
			}
		}

		&:not(.allow-back-nav) .back {
			opacity: 0;
			transition-delay: 0.5s, 0s;
			margin-left: -25px;

			& ~ span {
				transition-delay: 0.5ss;
				margin-left: 0;
			}
		}

		& svg.back {
			transition: all 0.5s ease-in-out, opacity 0.5s ease-in-out 0.5s;
			opacity: 1;
			transform: rotate(180deg);
			fill: #e6e6e6;
			height: 20px;
			width: 25px;
			cursor: pointer;
			flex-shrink: 0;

			& ~ span {
				transition: margin-left 0.5s ease-in-out 0.3s;
			}
		}

		& > div {
			color: #a4a4a4;
			margin: 0;
			/** for ellipsis **/
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			/** end ellipsis **/

			& span#coll-name {
				cursor: pointer;
				color: #e6e6e6;

				&::before {
					content: "/";
					cursor: initial;
					margin: 0 5px;
					color: #a4a4a4;
					display: inline-block;
					vertical-align: -4px;
					font-size: 1.7em;
					font-weight: 400;
					pointer-events: none;
					.lookMumIamAppearing(0.5s, ease-in-out);
				}

				/**
				* Span to contain element and allow
				* enlarging focus effect
				*/

				& > span {
					position: relative;
					.lookMumIamAppearing(0.5s, ease-in-out, 0.5s);

					&::after {
						content: "";
						position: absolute;
						width: 0%;
						transition: width 0.4s ease-in-out;
						border-bottom: 1px solid #e6e6e6;
						left: 0;
						bottom: -3px;
					}

					&:focus-within::after {
						width: 100%;
					}

					& > input {
						border: 0;
						background: transparent;
						color: #e6e6e6;
						font-size: 1em;
						font-family: "SF Display";
						font-weight: 200;
						outline: none;
						border-radius: 0;
						cursor: pointer;

						&::selection {
							background-color: #afafaf;
							color: #e6e6e6;
						}
					}
				}
			}

			& + svg {
				.lookMumIamAppearing(0.5s, ease-in-out, 0.5s);
				width: 15px;
				height: 15px;
				flex-shrink: 0;
				fill: #e6e6e6;
				margin: 0 10px;
				cursor: pointer;
			}
		}
	}
}
