.flo-typography-select {
	margin-bottom: 20px;

	&__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&__title {
		margin-bottom: 0;
	}
	&__toggle {
		text-decoration: none;
		padding-right: 2px;
		color: #d0d0d0;

		span:before {
			font-size: 22px;
			margin: 0;
		}

		&:focus {
			box-shadow: none;
			color: #d0d0d0;
		}
		&--active {
			color: var(--wp-admin-theme-color);
			&:focus {
				color: var(--wp-admin-theme-color);
			}
		}
	}
	&__body {
		padding-top: 15px;

		.components-button {
			display: block;
			width: 50%;
			text-align: center;
		}
	}
	&__popover {
		.components-popover__content {
			padding: 10px;
			overflow-y: visible;

			.components-button {
				width: 50%;
				text-align: center;
			}
		}
	}
	&__type {
		margin-bottom: 20px;
		display: flex;

		.components-button.is-primary {
			z-index: auto;
		}
	}
	&__theme {
	}
}
body .flo-typography-select__theme [data-font] {
	font-size: 13px;
}

.flo-typography-custom {
	&__font-family {
		position: relative;
		z-index: 2;
	}
	&__weight-subset {
		display: flex;
		justify-content: space-between;
		margin-top: 16px;

		.flo-select-control {
			width: 48%;
			margin-bottom: 16px;

			.components-base-control__field {
				margin-bottom: 0;
			}
		}
	}
	&__sizes {
		display: flex;
		justify-content: space-between;
		//margin-top: 16px;
	}
	&__size {
		width: 31%;

		.flo-number-control {
			.components-input-control {
				border-radius: 4px;
				display: flex;
				align-items: center;
				flex-direction: row;

				label {
					padding: 0;
					margin: 0;

					i:before {
						width: auto;
					}
				}
				input {
					width: 48px;
				}
			}
		}
	}
}
