/*

Copyright 2008-2018 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

$tagEditor_lineHeight: 27px;
.tagEditor {
	@include flexbox();
	@include flex-direction(row);
	

	&.readWrite {
//		border: 1px solid red;
	}

	ul {
		@include flex(none);

		@include flexbox();
		@include flex-direction(row);
		@include align-items(flex-start);

		&:before {
			content: 'tag';
			@include icon-font();
			font-size: 16pt;
			padding-right: 11px;
			line-height: $tagEditor_lineHeight;
			color: #ccc;
		}

		li.tag {
			@include flex(none);
			font-size: 13pt;
			font-weight: 100;

			margin-right: 10px;
			padding-left: 1px;
			padding-right: 30px;
			line-height: $tagEditor_lineHeight;

			/* boxed style test */
/*			background-color: $clipperz-orange;
			padding-left: 5px;
			padding-right: 5px;
			border-radius: 3px;
			border:1px solid gray;
			color: white;
*/

//			&:last-child:after {
//				content: '';
//			}
//
//			&:after {
//				content: '-';
//				color: #bbb;
//				padding: 0px 6px;
//			}
			
			span.tagRemoveButton {
				@include icon-font();
				@include userSelectNone();

				cursor: pointer;
				/*line-height: 22px;*/
				color: #ccc;
				/*color:white;*/

				position: absolute;
				margin-left: 5px;
				line-height: 31px;

				&:hover {
					color: rgb(155, 0, 0);
				};
			}
		}
		
	}
	
	input {
		@include flex(auto);
		font-size: 13pt;
		font-weight: 100;

		line-height: 24px;
		border: 0px;
		
//		@include placeholder {
//			font-style: italic;
//			color: #ccc;
///			font-weight:100;
//		}
	}
}
