@import 'constants';

#HEADER{

	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc( #{$header-height-noratio} - 1px );

	background-color: $header-bg;
	border-bottom: 1px solid #e3e7eb;

	// flex properties
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;

	font-size: #{$header-font-size-ratio}em;

	z-index: 150;


	/* (1) Version management */
	& > div.departments,
	& > div.versions{

		/* (1.1) Version status */
		& > div.current{
			display: block;
			position: relative;

			margin-left: 1em;

			padding: .5em 1em;
			padding-left: .7em;

			border: 1px solid #ddd;
			border-radius: 3px;
			box-shadow: 0 2px 2px #fff;

			transition: box-shadow .2s ease-in-out;

			cursor: pointer;

			// hover animation
			&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }

		}

		// current: CREATE + EDIT + REMOVE
		& > div.current{

			span.create,
			span.edit,
			span.remove{
				display: inline-block;
				position: relative;
					top: .2em;
					width: 1em;
					height: 1em;

				border-radius: 3px;

				background: center center no-repeat;
				background-size: 80% auto;

				&.create{
					background-image: url('/asset/svg/plus.svg@b8c0c8');
					&:hover{
						background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
					}
				}

				&.edit{
					background-image: url('/asset/svg/a.svg@b8c0c8');
					&:hover{
						background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
					}
				}

				&.remove{
					background-image: url('/asset/svg/cross.svg@b8c0c8');
					&:hover{
						background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}');
					}
				}

				&:last-child{
					margin-right: .5em;
				}
			}
			overflow: hidden;

			// editable input
			& > input[type='text']{
				display: inline-block;
				position: relative;
					width: 100%;
					max-width: 10em;

				margin: 0;
				padding: 0;

				border: none;
				border-radius: 0;

				// background-color: #f00;

				font-size: inherit;
				color: inherit;
			}

		}

		/* (1.2) Version dialog (to switch to another) */
		& > div.department-dialog,
		& > div.version-dialog{
			display: block;
			position: absolute;
				margin-top: 0;
				margin-left: 0;

			&.department-dialog{ margin-left: 1em; }

			// padding: 1em .5em;

			border: 1px solid #ddd;
			border-top: 0;
			border-radius: 0 0 3px 3px;

			&>:first-child{ border-top: 1px solid #ddd; }

			background-color: #fff;

			// box-shadow: 0 2px 2px #ddd;

			overflow: hidden;


			/* (1.2.1) version items */
			& > span{
				display: block;
				position: relative;

				padding: .5em 1em;
				padding-left: 2em;

				background-color: #fff;

				transition: background-color .2s ease-in-out;

				cursor: pointer;

				// hover animation
				&:hover{ background-color: darken(#fff, 5%); }

				// switch+create icons
				&:before{
					content: '';

					display: block;
					position: absolute;
						top: calc( 50% - 1em/2 );
						left: calc( .5em/2 + 1em/2 );
						width: 1em;
						height: 1em;

					background: url('/asset/svg/switch.svg@#{$rd-form-primary-color}') center center no-repeat;
					background-size: auto 80%;
				}

				// create icon specifications
				&[data-id='-1']{

					&:before{
						background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
						background-size: auto 60%;
					}

				}

			}
		}

	}

	/* (2) Department | Version layout */
	& > div.departments > div.current{
		margin-right: 0;
		padding-left: 1em;
		border-radius: 3px 0 0 3px;

		&:before{ content: none; }
	}

	& > div.versions > div.current{
		margin-left: 0;
		border-radius: 0 3px 3px 0;
		border-left: 0;
	}



}