/** Form style */
.octopus-app{
	fieldset{
		border-color: var(--octopus-secondary-lighter);
		border-style: solid;
		padding: 1rem;
	}

	.octopus-form-item{
		min-height: 1.44rem;
    	padding: 0.4rem 0;

		@media (width <= 960px) {
			padding: 0;
		}
	}

	.form-label {
		display: flex;
		line-height: 1.2rem;
		padding: 0.5rem 0 0;
		color: black;
		font-weight: bold;
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
	}

	.form-margin{
		margin-bottom: 1rem;
	}

	.counter-align-right{
		flex-grow: 1;
		text-align: right;
		font-size: 0.7em;
		margin-bottom: 0;
	}	


	select {
		outline-color: transparent !important;
		padding-right: 40px;
	}

	input[type="checkbox"], input[type="radio"]{
		accent-color: var(--octopus-primary);
		cursor: pointer;
		margin-right: 5px;
	}

	select,.form-input, .v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{
		background: var(--octopus-background) !important;
		border: 0.1rem solid var(--octopus-border-default);
		border-radius: var(--octopus-border-radius);
		height: 2rem;
		padding: 0.25rem 0.4rem;
	}

	.form-input, .v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{
		appearance: none;
		background-image: none;
		color: var(--octopus-color-text);
		display: block;
		font-size: 0.8rem;
		line-height: 1.2rem;
		max-width: 100%;
		position: relative;
		width: 100%;

		&:is(:disabled, .disabled) {
			background: var(--octopus-secondary-lighter) !important;
		}
	}

	/* stylelint-disable */
	.vue-swatches__trigger{
		border: solid 1px black;
		border-radius: var(--octopus-border-radius) !important;
		}

		.vue-swatches__fallback__input{
		padding-top: 0;
		padding-bottom: 0;
		position:relative;
		cursor: pointer;

		&::after{
			content: "+";
			position: absolute;
			top: 1px;
			left: 50%;
			color: white;
			font-weight: bold;
			font-size: 1rem;
			text-shadow:-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
		}
	}
	/* stylelint-enable */
}