@import "../constants.scss";

@mixin select-typography {
	width: 100%;
	z-index: 4;
	margin-bottom: 200px;

	.title-options,
	.slogan-options {
		width: 100%;
		display: flex;
		flex-direction: column;

	}
	.title-options {
		margin-bottom: 30px;
	}
	h1 {
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		color: #939393;
		margin: 0 0 15px;
	}

	label {
		display: block;
		font-weight: 500;
		font-size: 14px;
		line-height: 19px;
		color: #6A6A6A;
		margin-bottom: 5px;
	}
	input {
		color: $black;
		font-weight: 500;
		font-size: 14px;
		line-height: 19.07px;
		font-family: $noto;
		padding: 10px 13px;
		margin-bottom: 20px;
		border: 1px solid #E7E7E7;
		border-radius: 4px;
		&:focus {
			outline: none;
			border-color: $light-blue;
			transition: $transition;
		}
	}
	.font-select {
		margin-bottom: 20px;
		font-size: 14px;
		& > div {
			border: 1px solid #e7e7e7;
			& > div {
				margin: 0 0 0 13px;
				padding: 0;
			}
		}
		input {
			padding: 0;
		}
		span {
			width: 0;
		}
		svg {
			fill: #323232;
		}
	}
}
