@use "sass:math";

.atlas-component-aside {
	all: initial;
	background: linear-gradient(to top, rgba(black, 0), rgba(black, 0.1)) no-repeat;
	background-size: 1px 100%;
	color: $atlas-color-text;
	float: right;
	font-family: $font-sans-atlas;
	font-size: $atlas-scale-secondary;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: $space-md-atlas;
	padding-left: $space-md-atlas;
	position: relative;
	width: 250px;
	z-index: 1;

	&__section {
		margin: $space-md-atlas 0;
	}

	&__title {
		font-weight: bold;
		margin-bottom: math.div($space-sm-atlas, 2);
	}

	&__list {}

	&__list-item {
		font-family: $font-mono-atlas;
		font-size: $atlas-scale-mono-small;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		svg {
			color: $color-blue-atlas;
			position: relative;
			top: 2px;
			vertical-align: text-bottom;
		}
	}

	&__pre {}
}