@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 {
		background: colors.$nab-background-light-grey;
		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;
	}

	&__actions {
		align-items: center;
		display: flex;
		gap: 0.5em;
		padding: 1em;
	}

	&__add-new-segment-button.has-icon.has-text {
		padding: 2px 6px;
		text-decoration: none !important;
	}

	&__import-segments-button.has-icon.has-text {
		padding: 2px 6px;
		text-decoration: none !important;

		.dashicon {
			transform: rotate(180deg);
		}
	}

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

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