@use "../../../../../frontend/express/public/stylesheets/styles/base/colors" as c;
@use "../../../../../frontend/express/public/stylesheets/styles/states/_state";
@use "sass:map";

.cly-vue-theme-clydef {
	.crashes-statistics-dashboard {
		margin-bottom: 0 !important;
	}

	.crashes-tile {
		flex-grow: 1;
		align-items: center;

		&__donut{
			margin-left: 1rem;
		}

		&__content {
			margin-left: 1rem;
			margin-right: 1rem;
			flex-grow: 1;
		}

		&__content--fill {
			width: 100%;
			height: 100%;
		}

		&__value-container {
			flex: 0 0 auto;
		}

		&__description-container {
			margin-top: auto;
		}

		&--horizontal {
			border-right: 1px solid #ECECEC;

		}

		&--vertical {
			border-bottom: 1px solid #ECECEC;
		}

		&:last-of-type {
			border-right: 0;
			border-bottom: 0;
		}
	}

	.crash-group-title {
		cursor: pointer;
		color: #32659D;
	}

	.crash-group-title:hover {
		text-decoration: underline !important;
	}

	.crashes-statistics-graph {
		.el-tabs__content {
			background-color: #FFF;
			border: 1px solid #ececec;
		}
	}

	.crashgroup-mobile-diagnostics {
		&__tiles-container {
      height: 170px;
			box-shadow: 0px 2px 0px #EAECEF;
		}

		&__tile-content {
			height: 122px;
			margin-left: 24px;
			margin-right: 24px;
		}

		&__tile-content .text-medium {
			font-weight: 500;
		}
	}

	.crashgroup-mobile-metrics {
		&__tiles-container {
      height: 104px;
			box-shadow: 0px 2px 0px #EAECEF;
		}
	}

	.crashgroup-detail-tabs {
		.el-tabs__nav {
			border-top: 0;
		}

		.el-collapse-item__arrow {
		  margin-right: 16px;
		}
	}

	.crashgroup-thread-content {
		margin: 0;
		white-space: pre-wrap;
	}

	.crash-stacktrace {
		&__header {
			margin-bottom: 24px;
		}

		&__line-numbers {
			font-family: "Roboto Mono", monospace;
			font-size: 12px;
			line-height: 17px; // idk why this needs +1px of code line height lol
			color: map.get(c.$colors, "cool-gray-40");
			float: left;
			padding-right: 0.5em;
			margin-right: 1em;
			border-right: 1px solid map.get(c.$colors, "warm-gray-30");
		}

		&__code {
			font-family: "Roboto Mono", monospace !important;
			font-size: 12px;
			line-height: 16px;
		}
	}

	.crash-pre {
		font-family: "Roboto Mono", monospace;
		font-size: 12px;
		line-height: 16px;
		white-space: pre-wrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 60em;
	}

	.crash-link {
		text-decoration: underline;
		cursor: pointer;
	}

	.crash-link:hover {
		color: initial;
	}

	.crashgroup-common-metrics {
		&__tiles-container {
      		height: 104px;
		}
		box-shadow: 0px 1px 0px #EAECEF;
	}

	#crash-tabs {
		.el-tabs__header .el-tabs__item {
			background-color:#f6f6f6;
			border-left: none;
			border-right: none;
			margin-left: 24px;
		}

		.el-tabs__header .el-tabs__nav {
			border-right: 0px;
		}

		.el-tabs__header .el-tabs__item.is-active {
			border-bottom-color: #0166d6;
			border-bottom-width: 2px;
		}

		.el-tabs__item {
			height: auto;
			text-align: left;
			background-color:#f6f6f6;
		}

		.el-tabs__content {
			border-left: 1px solid #ececec;
			border-right: 1px solid #ececec;
		}

		.el-tabs--card>.el-tabs__header {
			margin: 0;
		}

		.el-tabs--card>.el-tabs__header {
			box-sizing: border-box;
		}

		.el-tabs__nav-wrap{
			background-color: #f6f6f6;
			border-left: none;
			border-right: 1px solid #ececec;
		}

		.el-tabs__nav-wrap.is-scrollable{
			border-bottom: 0px;
			background-color: #f6f6f6;
		}

		.el-textarea__inner{
			overflow-y: auto;
		}
	}

	.crash-user-profile-link {
		font-size: 16px;
		color: map.get(c.$colors, "cool-gray-40");
	}

	.crash-badge {
		@extend .text-smaller;

		font-weight: 500;
		padding: 0 4px;
		letter-spacing: 0.5px;

		&:not(:first-of-type) {
			margin-left: 4px;
		}

		&--info {
			background-color: map.get(c.$colors, "cool-gray-40");
			color: white;
		}

		&--negative {
			background-color: map.get(c.$colors, "red-10");
			color: map.get(c.$colors, "red-100");
		}

		&--neutral {
			background-color: map.get(c.$colors, "yellow-10");
			color: map.get(c.$colors, "yellow-100");
		}

		&--positive {
			background-color: map.get(c.$colors, "green-10");
			color: map.get(c.$colors, "green-100");
		}
	}

	.crash-header-button {
		padding: 7px 9px;
	}

	.crash-mark-as {
		&__button input {
			width: 100px;
			padding: 15px 9px;
		}
	}

	.crashes-crashgroup-header {
		&__name {
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 50vw;
		}
	}

	.crashes-action-bar {
		padding-top: 16px;
		padding-right: 16px;
		position:fixed;
		bottom:0;
		right: 0;
		height: 64px;
		background: #FFFFFF;
		z-index : 10000;
		margin: 0px auto;
		width: 100% !important;
		border-top: 1px solid #ececec;
		text-align: right;
	}

	.crash-icon-color-orange {
		color: #E49700;
	}

	.crash-icon-color-blue {
		color: #4D94E2;
	}

	.crash-icon-color-green {
		color: #12AF51;
	}

	.crash-icon-color-gray {
		color: #A7AEB8;
	}

	.cly-vue-header {
		&__level {
			align-items: flex-start !important;
		}
	}

	.el-table {
		&__expanded-cell {
			padding-left: 24px !important;
			padding-right: 24px !important;
			padding-bottom: 0px !important;
		}
	}

	.crash-occurences {
		.cly-vue-eldatatable__header--white {
			border-top: 1px;
		}
	}
}
