gnosis-css/css/scss/bootstrap/g-components/_sidebar.scss

$customPrefix: 'bs-';

.g-sidebar {
	--#{$customPrefix}sidebar-border-width: #{$gnosis-sidebar-border-width};
	--#{$customPrefix}sidebar-border-style: #{$gnosis-sidebar-border-style};
	--#{$customPrefix}sidebar-border-color: #{$gnosis-sidebar-border-color};
	--#{$customPrefix}sidebar-mobile-border-width: #{$gnosis-sidebar-mobile-border-width};
	--#{$customPrefix}sidebar-item-border-width: #{$gnosis-sidebar-item-border-width};
	--#{$customPrefix}sidebar-item-status-color: #{$primary-100};
	--#{$customPrefix}sidebar-item-active-color: #{$primary-200};
	--#{$customPrefix}sidebar-item-status-witdh: #{$gnosis-sidebar-item-border-width};

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;
	z-index: 100;

	border-width: var(--#{$customPrefix}sidebar-border-width);
	border-style: var(--#{$customPrefix}sidebar-border-style);
	border-color: var(--#{$customPrefix}sidebar-border-color);

	a.g-sidebar-item {
		transition: all 0.25s ease-in;
		* {
			transition: all 0.25s ease-in;
		}
		@media (prefers-reduced-motion) {
			* {
				transition: none;
			}
		}

		width: 100%;
		display: flex;
		gap: 0.5rem;
		align-items: center;
		text-wrap: wrap;
		border-width: var(--#{$customPrefix}sidebar-item-border-width);
		border-style: var(--#{$customPrefix}sidebar-border-style);
		border-color: var(--#{$customPrefix}sidebar-border-color);
		border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
		border-top-color: transparent;

		text-decoration: none;

		h6 {
			padding: 0;
			margin: 0;
			line-height: 1;
		}

		span.helper {
			font-size: 0.825rem;
			width: 100%;
			flex-shrink: 0;
			padding: 0;
			opacity: 0.75;
		}
		&:hover {
			span.helper {
				opacity: 1;
			}
		}
		&:focus-visible &:not(.active) {
			border-width: var(--#{$customPrefix}sidebar-item-status-width);
			
		}
		&:focus-visible &.active {
			border-width: var(--#{$customPrefix}sidebar-item-status-width);
			border-style: var(--#{$customPrefix}sidebar-border-style);
			border-color: var(--#{$customPrefix}sidebar-border-color);

		}
		&.active {
			background-color: var(--#{$customPrefix}sidebar-item-active-color);
			border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
			border-style: var(--#{$customPrefix}sidebar-border-style);
			border-color: var(--#{$customPrefix}sidebar-border-color);
		}
		// &.disabled {
		// }
		&:hover {
			background-color: var(--#{$customPrefix}sidebar-item-status-color);
			border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
			border-style: var(--#{$customPrefix}sidebar-border-style);
			border-color: var(--#{$customPrefix}sidebar-border-color);
		}
	}

	@include media-breakpoint-down(md) {
		position: fixed;
		flex-direction: row;
		align-items: center;
		max-width: unset;
		left: 0;
		bottom: 0;
		right: 0;
		height: 3rem;
		border: 0;

		border-width: var(--#{$customPrefix}sidebar-mobile-border-width);
		border-style: var(--#{$customPrefix}sidebar-border-style);
		border-color: var(--#{$customPrefix}sidebar-border-color);

		a.g-sidebar-item {
			flex-direction: column;
			padding: 0.25rem;
			flex-wrap: nowrap;
			justify-content: center;
			height: 100%;
			opacity: 0.5;
			&.active,
			&:hover {
				opacity: 1;
			}
			h6 {
				font-size: $smaller-font-size;
				font-weight: semibold;
			}

			span.helper {
				display: none;
			}
		}
	}
}