/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
@use './variables.scss' as *;

/* Default global values */
button:not(.button-vue),
input:not([type='range']),
textarea {
	margin: 0;
	padding: 7px 6px;

	cursor: text;

	color: var(--color-main-text);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--border-radius-element);
	outline: none;
	background-color: var(--color-main-background);

	font-size: 13px;

	&:not(:disabled):not(.primary) {
		&:hover,
		&:focus,
		&.active {
			/* active class used for multiselect */
			border-color: var(--color-primary-element);
			outline: none;
		}

		&:active {
			color: var(--color-main-text);
			outline: none;
			background-color: var(--color-main-background);
		}
	}

	&:disabled {
		cursor: default;
		opacity: $opacity_disabled;
		color: var(--color-text-maxcontrast);
		background-color: var(--color-background-dark);
	}

	&:required {
		box-shadow: none;
	}

	&:invalid {
		border-color: var(--color-border-error, var(--color-error));
		box-shadow: none !important;
	}

	/* Primary action button, use sparingly */
	&.primary {
		cursor: pointer;
		color: var(--color-primary-element-text);
		border-color: var(--color-primary-element);
		background-color: var(--color-primary-element);

		&:not(:disabled) {
			&:hover,
			&:focus,
			&:active {
				border-color: var(--color-primary-element-light);
				background-color: var(--color-primary-element-light);
			}
			&:active {
				color: var(--color-primary-element-text-dark);
			}
		}

		&:disabled {
			cursor: default;
			color: var(--color-primary-element-text-dark);
			// opacity is already defined to .5 if disabled
			background-color: var(--color-primary-element);
		}
	}
}
