/**
 *
 * Copyright (c) 2024 Analog Devices, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
@use '@common/styles/colors';
@use '@common/styles/layout';
@use '@common/styles/fonts';

$padding: 4px;

[class*='overlapping-stack'] {
	[class*='tooltipContainer'] {
		pointer-events: none;
		width: 260px;
	}

	[class*='header'] {
		color: colors.$default-foreground;
		padding: 16px 16px 0 16px !important;
		font-size: 13px;
		font-weight: 800;
	}
}

.segment {
	width: 100%;
	position: absolute;
	background-color: colors.$default-background;
	box-shadow: 0 0 0 2px colors.$default-background;

	&:hover {
		z-index: 10;
		cursor: pointer;
	}

	.container {
		display: flex;
		flex-direction: column-reverse;
		height: 100%;
		width: inherit;
		position: relative;

		.address {
			position: absolute;
			bottom: 0;
			left: calc(layout.$elf-overlapping-stack-width + 2px);
			background: colors.$list-inactive-selection-background;
			font-size: 12px;
			line-height: 10px;
			padding: $padding;
			box-shadow: 0 0 0 2px colors.$default-background;

			&:hover {
				background-color: colors.$list-active-selection-background;
				z-index: 10;
				color: colors.$list-active-selection-foreground;
			}
		}
	}
}

.segment.read-write-exec {
	box-sizing: border-box;

	&:hover {
		color: colors.$list-active-selection-foreground;
		z-index: 10;

		.address {
			background-color: colors.$list-active-selection-background !important;
		}
	}
}

.segment.read-write-exec::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid colors.$list-inactive-selection-background;
	background-color: colors.$default-background;
}

.segment.read-write-exec:hover::before {
	border: 2px solid colors.$list-active-selection-background;
}

.segment.read {
	&:hover {
		color: colors.$list-active-selection-foreground;

		.address {
			background-color: colors.$list-active-selection-background !important;
			z-index: 10;
		}
	}
}

.segment.read::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: colors.$list-inactive-selection-background;
}

.segment.read:hover::before {
	background-color: colors.$list-active-selection-background;
}

.segment.read-write-exec.active {
	color: colors.$list-active-selection-foreground;
	z-index: 10;
}

.segment.read-write-exec.active::before {
	border: 2px solid colors.$list-active-selection-background;
}

.segment.read.active::before {
	background-color: colors.$list-active-selection-background;
}

.address.active {
	background-color: colors.$list-active-selection-background !important;
	z-index: 10;
	color: colors.$list-active-selection-foreground;
}

.tooltip-container {
	display: flex;
	flex-direction: column;
	gap: 4px;

	.tooltip-row {
		font-family: fonts.$default-font-family;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;

		.start {
			color: colors.$default-foreground;
		}

		.end {
			color: colors.$description-foreground;
		}
	}
}
