@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin component {
	border-radius: var(--pr-t-border-radius-default);
	gap: var(--commons-divider-width);
	display: inline-flex;
	list-style-type: none;
	padding: 0;
	margin: 0;

	.button {
		border-radius: 0;
		display: block;
		margin: 0;
		position: relative;
		flex-grow: 1;
		white-space: normal;

		&:first-child {
			border-radius: var(--pr-t-border-radius-default) 0 0 var(--pr-t-border-radius-default);
		}

		&:last-child,
		&.mod-more {
			border-radius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;
		}

		&:not(:first-child) {
			&.outlined {
				margin-inline-start: -2px;
			}
		}

		&:not([disabled], .is-disabled) {
			&:hover,
			&:focus-visible {
				z-index: 1;
			}

			&:focus-visible {
				@include a11y.focusVisible;
			}
		}
	}

	.button-group-item {
		flex-grow: 1;

		.button:not(.mod-more) {
			inline-size: 100%;
			border-radius: 0;
		}

		&:first-child {
			.button {
				border-radius: var(--pr-t-border-radius-default) 0 0 var(--pr-t-border-radius-default);
			}
		}

		&:last-child {
			.button {
				border-radius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;
			}
		}
	}

	&:is(ul) {
		flex-wrap: wrap;
	}
}