.aws-service-details-container {
	display: flex;
	flex-direction: column;
	width: 100%;

	.aws-service-details-tabs {
		margin-top: 8px;

		// remove the padding left from the first div of the tabs component
		// this needs to be handled in the tabs component
		> div:first-child {
			padding-left: 0;
		}

		.aws-service-details-data-collected-content-logs,
		.aws-service-details-data-collected-content-metrics {
			display: flex;
			flex-direction: row;
			gap: 8px;

			.aws-service-details-data-collected-content-title {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8px;

				color: var(--l2-foreground);

				/* Bifrost (Ancient)/Content/sm */
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}

		.aws-service-details-overview {
			display: flex;
			flex-direction: column;
			gap: 16px;

			.aws-service-details-overview-configuration {
				display: flex;
				flex-direction: column;

				border-radius: 4px;
				border: 1px solid var(--l3-background);
				background: var(--l1-background);

				.aws-service-details-overview-configuration-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					gap: 8px;
					width: 100%;

					border-radius: 4px 4px 0 0;

					padding: 8px 12px;

					.aws-service-details-overview-configuration-title-text {
						color: var(--l1-foreground);
						font-family: Inter;
						font-size: 13px;
						font-style: normal;
						font-weight: 400;
						line-height: 22px; /* 157.143% */
						letter-spacing: -0.07px;

						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 8px;
					}

					.configuration-action {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 8px;
					}
				}

				.aws-service-details-overview-configuration-s3-buckets {
					padding: 12px;
					background: var(--l1-background);
				}

				.aws-service-details-overview-configuration-content {
					display: flex;
					flex-direction: column;
					gap: 16px;

					padding: 12px;
					background: var(--l1-background);

					.aws-service-details-overview-configuration-content-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 8px;
					}
				}

				.aws-service-details-overview-configuration-actions {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					gap: 8px;
					padding: 8px 12px;

					border-top: 1px solid var(--l3-background);
					background: var(--l1-background);

					.discard-btn {
						width: 100px;
					}

					.save-btn {
						width: 100px;
					}
				}

				.aws-service-details-overview-configuration-title-text-select-all {
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: 18px; /* 138.462% */
				}
			}

			.aws-service-details-overview-markdown {
				padding: 12px;
				background: var(--l1-background);
				color: var(--l1-foreground);
			}

			.aws-service-details-actions {
				display: flex;
				flex-direction: row;
				gap: 8px;
				padding: 12px 0;
			}

			.aws-service-dashboards {
				border-radius: 6px;
				border: 1px solid var(--l3-background);
				background: var(--l1-background);

				.aws-service-dashboards-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 8px;

					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 13px;
					font-style: normal;
					font-weight: 500;
					line-height: 20px; /* 142.857% */
					letter-spacing: -0.07px;

					padding: 8px 16px;
					border-bottom: 1px solid var(--l3-background);
				}

				.aws-service-dashboards-items {
					display: flex;
					flex-direction: column;

					.aws-service-dashboard-item {
						display: flex;
						flex-direction: column;
						gap: 8px;
						padding: 12px 16px 12px 16px;

						&.aws-service-dashboard-item-clickable {
							cursor: pointer;

							&:hover {
								background-color: var(--l2-background);
							}
						}

						.aws-service-dashboard-item-title {
							color: var(--l1-foreground);
							font-family: Inter;
							font-size: 13px;
							font-style: normal;
							font-weight: 500;
							line-height: 20px; /* 142.857% */
							letter-spacing: -0.07px;
						}

						.aws-service-dashboard-item-description {
							color: var(--l2-foreground);
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 150% */
						}
					}
				}
			}
		}
	}
}
