/*
 * Buttons
**/


.button-rounded {
	--buttonBorder: var(--space-1);

	/* Somehow browser UA overwrites minireset's setting */
	box-sizing: border-box;

	height: var(--space-24);
	padding: 0 var(--space-10);
	display: flex;
	align-items: center;

	font-size: var(--fontSize-12);
	line-height: 1;
	font-weight: 600;

	border-radius: var(--borderRadius-max);
	transition: all var(--duration-200) ease-in-out;


	/* Workspace Left */
	.workspace__left & {
		min-width: max-content; /* Avoid resizing on collapse */

		color: var(--color-blue-grey-300);
		background-color: var(--color-blue-grey-850);
		border: var(--buttonBorder) solid var(--color-blue-grey-700);

		&:hover {
			color: var(--color-blue-grey-900);
			border: var(--buttonBorder) solid var(--color-yellow-action);
			background-color: var(--color-yellow-action);
		}
	}


	/* Window */
	.window & {
		color: var(--color-blue-grey-900);
		background-color: var(--color-blue-grey-50);
		border: var(--buttonBorder) solid var(--color-blue-grey-200);

		&.--default {
			color: var(--color-blue-grey-50);
			border: var(--buttonBorder) solid var(--color-blue-grey-900);
			background-color: var(--color-blue-grey-900);
		}

		&:hover {
			color: var(--color-blue-grey-900);
			border: var(--buttonBorder) solid var(--color-yellow-action);
			background-color: var(--color-yellow-action);
		}
	}
}