@import "../../style";

.setup-form__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 335px;
	padding: 0 20px;

	@include break-medium {
		padding: 0 20px;
		width: 368px;
	}

	.setup-form__field,
	fieldset {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 16px;
	}

	label,
	textarea,
	.expanding-area textarea {
		font-family: "SF Pro Display", $sans;
		font-weight: 400;
	}

	textarea.form-textarea,
	pre {
		color: var(--studio-gray-100);
		font-size: $font-body-small;
		padding: 12px 16px;
		line-height: 20px;
		min-height: 44px;
		border-radius: 4px;
		background-repeat: no-repeat;
		background-position: 95%;
		&:focus {
			border-color: var(--studio-gray-10);
			box-shadow: 0 0 0 2px var(--color-primary-10);
			outline: none;
		}
	}

	pre {
		border: none;
	}

	textarea.form-textarea {
		overflow: hidden;
	}

	.form-input-validation {
		padding-bottom: 0;
	}

	.form-label {
		color: var(--studio-gray-60);
		margin-bottom: 8px;
	}

	label {
		color: var(--studio-gray-60);
		font-size: $font-body;
	}

	input[type="text"] {
		border-color: var(--studio-gray-10);
		border-radius: 4px;
		box-sizing: border-box;
		font-size: 0.875rem;
		padding: 0.875rem 1rem;
		height: 44px;

		&:focus {
			border-color: var(--studio-gray-10);
			box-shadow: 0 0 0 2px var(--color-primary-10);
			outline: none;
		}
	}

	.setup-form__submit {
		border: none;
		width: 100%;
		// adds +2 px of padding to the button to match the input field height
		height: 40px;
		margin-top: 16px;
		&.disabled,
		&.disabled:focus,
		&.disabled:hover,
		&:disabled {
			background: var(--studio-blue-20);
			cursor: default;
		}
		&:focus {
			box-shadow: none;
			outline: 2px solid var(--studio-blue-60);
			outline-offset: 1px;
			background: var(--studio-blue-60);
		}
	}
}

.components-form-file-upload {
	span {
		text-decoration: underline;
	}
	.add {
		color: var(--studio-black);
	}
	.replace {
		color: var(--studio-gray-100);
	}
}
