/**
 * Font Picker
 *
 * @since    1.0.0
 */
$dropdown--height: 315px;
$dropdown--width: 440px;
$font-picker--width: 190px;
body {
	.editor-component--field-typography-selector {
		width: 100%;
		margin-bottom: 10px;
		button {
			transition: all 0.6s $easeOutQuart;
			background-color: transparent;
			outline: none;
			cursor: pointer;
			padding: 10px 15px;
			border: 1px solid $color--line;
			border-radius: 3px;
			display: block;
			text-align: left;
			box-sizing: border-box;
			width: 100%;

			// Test
			//padding-left: 0;
			//padding-right: 0;
			//border-left: 0;
			//border-right: 0;
			//border-radius: 0;
			//border-bottom: 0;

			label {
				font-weight: normal;
				color: $color--text;
			}
			p {
				padding: 0;
				margin: 0;
				font-size: 25px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 240px;
			}
			/* ---- hover ---- */
			&:hover {
				border-color: $color--link-hover;
			}
		}
	}
	.components-popover.editor-component--dropdown-typography-selector {
		.components-popover__content {
			height: auto;
			width: $dropdown--width;
			padding: 8px 8px 8px 0;
			box-sizing: border-box;
			min-height: $dropdown--height;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			/**
			 * Font Family
			 */
			#font-picker {
				box-shadow: none;
				border-right: 1px solid $color--line;
				width: $font-picker--width;
				flex-shrink: 0;
				position: relative;

				.components-spinner {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				> button { display: none; }
				ul {
					height: $dropdown--height;
					max-height: 100%;
					box-shadow: none;
					position: relative;
					background-color: transparent !important;

					li {
						margin: 0;
						button {
							font-size: 16px;
							background-color: transparent !important;
							padding-left: 15px;
							position: relative;
							&::before {
								transition: all 0.6s $easeOutQuart;
								content: " ";
								width: 3px;
								height: 0;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								background-color: $color--link-hover;
							}
							&.active-font {
								color: $color--link-hover;
								&::before {  height: 100%; }
							}
							&:hover {
								color: $color--link-hover;
								&::before {  height: 70%; }
							}
						}
					}

				}
			}

			/**
			 * Other Options
			 */
			.typography-options__wrapper {
				padding: 10px 20px 0 25px;
				// Menu
				.tabs-menu {
					border-bottom: 1px solid $color--line;
					padding-bottom: 5px;
					margin-bottom: 15px;
					margin-top: 5px;

					button {
						border: none;
						background-color: transparent;
						position: relative;
						cursor: pointer;
						outline: none;
						&::before {
							content: " ";
							width: 100%;
							height: 0;
							position: absolute;
							left: 0;
							bottom: -6px;
							background-color: $color--link-hover;
						}
						svg {
							path, rect {
								transition: all 0.6s $easeOutQuart;
							}
						}
						&[data-mode='active'] {
							pointer-events: none;
							&::before { height: 2px; }
							svg {
								path { fill: $color--link-hover; }
								rect { stroke: $color--link-hover; }
							}
						}
						/* ---- hover ---- */
						&:hover {
							svg {
								path { fill: $color--link-hover; }
								rect { stroke: $color--link-hover; }
							}
						}

					}
				}

				// Content
				.tabs-content {
					> div {
						div:nth-of-type(2) { margin-bottom: 13px; }
						.components-range-control {
							margin-bottom: 10px;
						}
					}
				}
			}
		}
	}
}