react-elegant-ui/esm/components/TabsMenu/_view/TabsMenu_view_motion.css

Elegant UI components, made by BEM best practices for react

.TabsMenu_view_motion {
	position: relative;
}

.TabsMenu_view_motion .TabsMenu-Container {
	list-style-type: none;
}

.TabsMenu_view_motion .TabsMenu-Cursor {
	position: absolute;
	background: var(--tabsmenu-view-default-border-color-active);
	transition:
		width var(--tabsmenu-transition-motion) linear,
		transform var(--tabsmenu-transition-motion) linear;
}

/* Tab */
.TabsMenu_view_motion .TabsMenu-Tab {
	position: relative;
	outline: none;
	color: var(--tabsmenu-view-default-typo-color-base);
	overflow: hidden;
	z-index: 0;
	transition: color var(--tabsmenu-transition-hover);
}

.TabsMenu_view_motion .TabsMenu-Tab.TabsMenu-Tab_disabled {
	color: var(--tabsmenu-view-default-typo-color-disabled);
	transition: all 0s;
}

.TabsMenu_view_motion .TabsMenu-Tab::before {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: -1;
	content: '';
	background-color: var(--tabsmenu-view-default-fill-color-base);
	transition: background-color var(--tabsmenu-transition-hover);
}

.TabsMenu_view_motion .TabsMenu-Tab:hover::before {
	background-color: var(--tabsmenu-view-default-fill-color-hover);
}

.TabsMenu_view_motion .TabsMenu-Tab.TabsMenu-Tab_disabled::before {
	background-color: var(--tabsmenu-view-default-fill-color-disabled);
	transition: all 0s;
}

/* Horizontal */
.TabsMenu_view_motion.TabsMenu_layout_horizontal .TabsMenu-Container {
	border-bottom:
		var(--tabsmenu-view-default-border-width) solid
		var(--tabsmenu-view-default-border-color-base);
}

.TabsMenu_view_motion.TabsMenu_layout_horizontal .TabsMenu-Cursor {
	left: 0;
	bottom: 0;
	height: var(--tabsmenu-view-default-border-width);
}

.TabsMenu_view_motion.TabsMenu_layout_horizontal .TabsMenu-Tab:not(:last-child) {
	margin-inline-end: 0;
}

/* Vertical */
.TabsMenu_view_motion.TabsMenu_layout_vertical .TabsMenu-Container {
	border-left:
		var(--tabsmenu-view-default-border-width) solid
		var(--tabsmenu-view-default-border-color-base);
}

.TabsMenu_view_motion.TabsMenu_layout_vertical .TabsMenu-Cursor {
	left: 0;
	top: 0;
	width: var(--tabsmenu-view-default-border-width);
}

.TabsMenu_view_motion.TabsMenu_layout_vertical .TabsMenu-Tab:not(:last-child) {
	margin-block-end: 0;
}