@use "~admin-stylesheets/breakpoints";
@use "~admin-stylesheets/colors";

.nab-segment-list {
	background: colors.$nab-background-light-grey;
	margin: 0;
	flex-grow: 0;
	flex-shrink: 0;
	width: 6em;

	@include breakpoints.break-mobile {
		width: 10em;
	}

	@include breakpoints.break-small {
		width: 12em;
	}

	@include breakpoints.break-medium {
		width: 6em;
	}

	@include breakpoints.break-large {
		width: 8em;
	}

	@include breakpoints.break-xlarge {
		width: 15em;
	}

	&__item {
		border-left: 4px solid transparent;
		margin: 0;
		padding: 1em;

		&--is-active {
			background: colors.$nab-background-white;
			border-left-color: colors.$wp-components-color-accent;
		}
	}

	&__item button {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__item--is-active button,
	&__item--is-active button:disabled {
		color: colors.$nab-text;
		font-weight: 400;
		opacity: 1;
	}

	&__item button:focus {
		box-shadow: none;
	}
}