@import "../../variables";

.family-list {
	flex: 0 0 45%;
	background-color: $lightest-grey;
	border-bottom-left-radius: 7px;
	display: flex;
	flex-direction: column;

	&-create {
		padding: 40px 40px 20px;
	}

	&-families-content {
		padding: 0 40px 20px;
	}
}

.family {
	display:flex;
	flex-flow: row nowrap;
	margin-top: 5px;
	cursor:pointer;
	color:$dark-grey;
	transition: color .2s ease;
	padding: 10px 20px;
	transition: all .2s ease-out;
	background-color: mix(black, $lightest-grey, 3%);
	margin-left: 5px;
	margin-right: 5px;
	border: 2px solid mix(black, $lightest-grey, 3%);
	align-items: center;

	&:first-of-type {
		background-color: mix(black, $lightest-grey, 3%);
	}
	&:nth-child(2n+1) {
		background-color: $white;
	}
	&.is-active {
		color: $green;
	}
	&:hover {
		color: $green;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}
	&:focus {
		outline: none;
		border: 2px solid mix($green, $lightest-grey, 30%);
	}

	&:hover &-sample.elzevir, &.is-active &-sample.elzevir {
		background-image: url('../../../images/elzevir-sample-active.svg') !important;
	}

	&:hover &-sample.john-fell, &.is-active &-sample.john-fell {
		background-image: url('../../../images/john-fell-sample-active.svg') !important;
	}

	&:hover &-sample.venus, &.is-active &-sample.venus {
		background-image: url('../../../images/grotesk-sample-active.svg') !important;
	}

	&:hover &-sample.gfnt, &.is-active &-sample.gfnt {
		background-image: url('../../../images/spectral-sample-active.svg') !important;
	}

	&:hover &-sample.antique, &.is-active &-sample.antique {
		background-image: url('../../../images/antique-sample-active.svg') !important;
	}

	&-sample.elzevir {
		background-image: url('../../../images/elzevir-sample-hover.svg');
	}

	&-sample.john-fell {
		background-image: url('../../../images/john-fell-sample-hover.svg');
	}

	&-sample.gfnt {
		background-image: url('../../../images/spectral-sample-hover.svg');
	}

	&-sample.venus {
		background-image: url('../../../images/grotesk-sample-hover.svg');
	}

	&-sample.antique {
		background-image: url('../../../images/antique-sample-hover.svg');
	}

	&-sample {
		flex:0 0 70px;
		height: 43px;
		background-repeat: no-repeat;
		margin-right: 20px;
		background-size:contain;
	}

	&-info {
		flex: 1;
		font-weight:600;
		letter-spacing:0.02em;

		&-name {
			font-size:17px;
			text-overflow: ellipsis;
			overflow:hidden;
		}

		&-base {
			font-size:10px;

			&-template {
				font-size: 17px;
				font-weight:400;
				font-style:italic;
			}
		}
	}

	.view-panels-menu {
		position: static;
	}
}

.add-family {
	background-color: mix(black, $white, 1%);
	transition:all .2s ease;
	margin-bottom:15px;
	border-radius:4px;

	&-form {
		width:750px;

		&-header {
			display:flex;
			flex-flow:row nowrap;
			justify-content:space-between;

			&-title {
				margin:0;
			}

			&-close {
				cursor:pointer;
				background-color: $lightest-grey;
				border-radius: 50%;
				height: 30px;
				margin-top: 10px;

				&:hover {
					background-color:$light-grey;
				}
			}
		}

		form {
			margin-right: 20px;
		}

		&-input {
			display: block;
			width: 100%;
			border:none;
			padding: .8em;
			background-color: $lightest-grey;
			border: 2px solid $light-grey;
			border-radius: 5px;
			color:$dark-grey;
			font-size: 1.1em;
			margin-bottom: 1em;
			margin-top:20px;

			&:focus {
				outline: none;
				border-color: $green;
			}
		}

		&-label {
			display: inline-block;
			margin-top: 5px;
			font-size:1.1em;
			font-weight: 700;

			color: $dark-grey;

			&-order {
				color: $green;
			}
		}

		&-template-list {
			margin-left: -10px;
			padding-bottom: 5px;
			display: block;
			height: 63vh;
			overflow: hidden;

			&-content {
				padding: 10px;
			}
		}

		&-error {
			width: calc(100% - 20px);
			text-align: center;
			padding: 5px;
			background-color: $red;
			margin-bottom: 15px;
			color: $white;
		}
	}

	&-header {
		display:flex;
		flex-flow:row nowrap;
		margin-left:20px;

		&-icon {
			margin-right:15px;
		}
	}

	&.with-error {
		flex-basis:600px;
	}

	&.family-form-open &-header {
		display:none;
	}

	&.family-form-open &-form {
		display:block;
	}

	&:hover {
		color:$dark-grey;
	}

	.button {
		border: 2px solid $green;
		font-weight: 500;
		color: $green;
		transition: all .2s ease;
		margin-right: 20px;
		&:hover {
			color: white;
			background: $green;
		}
	}

}

.family-template-choice {
	cursor: pointer;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	background-color:$white;
	margin-left: 0;
	margin-right: 10px;
	border: 2px solid $lightest-grey;
	transition: all .2s ease-out;
	transform: perspective(1px);

	&:nth-child(2n+1) {
		background-color: $lightest-grey;
	}

	&:hover {
		transform: perspective(1px) scale3d(1.01, 1.01, 1.01);
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}



	&-sample {
		padding:15px;
		line-height:85px;
		transition:all .2s ease;
		color:$dark-grey;
		width: 85%;
		float: right;
		position: relative;
		display: block;
		overflow: hidden;
		img {
			vertical-align:bottom;
			height: 100px;
			width: auto;
		}
	}

	&-provider {
		width: 15%;
		height: 122px;
		display: inline-block;
		float: left;
		position: relative;
		.provider-prototypo {
			width:50px;
			height:50px;
			background-color: $black;
			border: 2px solid $lightest-grey;
			position:absolute;
			z-index:2;
			background-position: center;
			background-size: 45%;
			background-image: url("../../../images/prototypo-icon-white.svg");
			background-repeat: no-repeat;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			transition: background-color .2s ease;
		}

		.provider-google {
			width:50px;
			height:50px;
			background-color: $white;
			border: 2px solid $lightest-grey;
			position:absolute;
			z-index:2;
			background-position: center;
			background-size: 65%;
			background-image: url("../../../images/icon-google.svg");
			background-repeat: no-repeat;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			transition: background-color .2s ease;
		}

		.provider-production {
			width:50px;
			height:50px;
			background-color: $white;
			border: 2px solid $lightest-grey;
			position:absolute;
			z-index:2;
			background-position: center;
			background-size: 85%;
			background-image: url("../../../images/icon-ProductionType.svg");
			background-repeat: no-repeat;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			transition: background-color .2s ease;
		}
	}

	&.is-active &-provider div {
		background-color: $green;
		background-image: url("../../../images/icon-checked-flat.svg");
		background-size: 45% !important;
	}
}
