react-elegant-ui/components/Button/_view/Button_view_pseudo.css

Elegant UI components, made by BEM best practices for react

.Button_view_pseudo {
	color: var(--button-view-pseudo-typo-color-base);
}

.Button_disabled.Button_view_pseudo {
	color: var(--button-view-pseudo-typo-color-disabled);
}

.Button_view_pseudo.Button::before {
	border:
		var(--button-border-width) solid
		var(--button-view-pseudo-border-color-base);
	background-color: var(--button-view-pseudo-fill-color-base);
	transition:
		background-color var(--button-transition-hover) linear,
		border-color var(--button-transition-hover) linear;
}

/* Focus */
.Button_focusVisible.Button_view_pseudo:focus::before {
	border-color: var(--button-view-pseudo-outline-color);
}

/* Disabled */
.Button_view_pseudo:not(.Button_disabled):hover::before {
	background-color: var(--button-view-pseudo-fill-color-hovered);
}

.Button_disabled.Button_view_pseudo::before {
	border-color: var(--button-view-pseudo-fill-color-disabled);
	background-color: var(--button-view-pseudo-fill-color-disabled);
}