.fullscreen-grid-container {
	overflow: auto;
	margin: 8px -8px;
	margin-right: 0;
	margin-bottom: 64px;

	.react-grid-layout {
		border: none !important;
		margin-top: 0;

		.row-panel {
			border-radius: 4px;
			background: color-mix(in srgb, var(--card) 40%, transparent);
			padding: 8px;
			display: flex;
			gap: 6px;
			align-items: center;

			.settings-icon {
				color: var(--l2-foreground);
				cursor: pointer;
			}

			.row-icon {
				color: var(--l2-foreground);
				cursor: pointer;
			}

			.grip {
				cursor: move;
			}

			.section-title {
				color: var(--l2-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}

		.widget-graph-component-container {
			.widget-graph-container {
				&.graph-panel-container {
					height: 100%;
				}
			}
		}
	}

	.footer {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		width: -webkit-fill-available;

		.locked-text {
			align-self: flex-end;
			width: 80px;
			border: none;
			cursor: default;
			display: inline-flex;
			padding: 4px 6px;
			align-items: center;
			gap: 4px;
			border-radius: 4px 0px 0px 0px;
			background: var(--bg-sakura-500);
			color: var(--l1-foreground);
			backdrop-filter: blur(6px);
			font-family: 'Space Mono';
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: 16px; /* 133.333% */
			letter-spacing: 0.48px;
			text-transform: uppercase;

			.ant-btn-icon {
				margin-inline-end: 0px;
			}
		}

		.locked-bar {
			background: var(--bg-sakura-500);
			height: 6px;
			width: 100%;
		}
	}
}

.widget-graph-component-container {
	.widget-graph-container {
		height: 100%;

		&.graph-panel-container {
			height: calc(100% - 30px);
		}
	}

	&:hover {
		.widget-header-more-options {
			visibility: visible;
		}
	}
}

.widget-full-view {
	.ant-modal-content {
		background-color: var(--l2-background);

		.ant-modal-header {
			background-color: var(--l2-background);
		}
	}
}

.error-message-container {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	padding-top: 0;
	padding-bottom: 32px;
}

.row-settings {
	.ant-popover-inner {
		width: 191px;
		flex-shrink: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: linear-gradient(
			139deg,
			color-mix(in srgb, var(--card) 80%, transparent) 0%,
			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		padding: 0px;

		.menu-content {
			.section-1 {
				.rename-btn,
				.new-panel-btn {
					display: flex;
					align-items: center;
					gap: 6px;
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.14px;
					padding: 14px;
					width: 100%;
					.ant-btn-icon {
						margin-inline-end: 0px;
					}
				}

				.rename-btn {
					padding-bottom: 10px;
				}
			}

			.section-2 {
				border-top: 1px solid var(--l1-border);
				.remove-section {
					display: flex;
					align-items: center;
					width: 100%;
					gap: 6px;
					color: var(--l2-foreground);
					font-family: Inter;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.14px;
					padding: 10px 18px 12px 14px;
					color: var(--bg-cherry-400);
					font-family: Inter;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.14px;
					.ant-btn-icon {
						margin-inline-end: 0px;
					}
				}
			}
		}
	}
}

.rename-section {
	.ant-modal-content {
		width: 384px;
		height: auto;
		flex-shrink: 0;
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: var(--l2-background);
		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
		padding: 0px;

		.ant-modal-header {
			padding: 16px;
			background: var(--l2-background);
			border-bottom: 1px solid var(--l1-border);
			margin-bottom: 0px;

			.ant-modal-title {
				color: var(--l1-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
			}
		}

		.ant-modal-body {
			padding: 12px 16px 16px 16px;

			.typography {
				color: var(--l1-foreground);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 20px; /* 142.857% */
			}

			.ant-form-item {
				margin-bottom: 0px;

				.ant-input {
					margin-top: 8px;
					margin-bottom: 24px;
				}

				.action-btns {
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
					gap: 12px;

					.ok-btn {
						display: flex;
						align-items: center;
						color: var(--l1-foreground);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: 24px; /* 200% */
						display: flex;
						width: 140px;
						padding: 4px 8px;
						justify-content: center;
						align-items: center;
						gap: 4px;
						border-radius: 2px;
						background: var(--primary-background);

						.ant-btn-icon {
							margin-inline-end: 0px;
						}
					}

					.cancel-btn {
						display: flex;
						align-items: center;
						color: var(--l2-foreground);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: 24px; /* 200% */
						display: flex;
						padding: 4px 8px;
						justify-content: center;
						align-items: center;
						gap: 4px;
						border-radius: 2px;
						background: var(--l1-border);

						.ant-btn-icon {
							margin-inline-end: 0px;
						}
					}
				}
			}
		}
	}
}

.view-onclick-show-button {
	position: absolute;
	background: var(--l1-background);
	border: 2px solid var(--l1-border);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	box-shadow: none;
	list-style-type: none;
	padding: 4px;
	color: var(--l2-foreground);
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: auto;
	max-height: 150px;
	width: max-content;
	max-width: 200px;

	.menu-item {
		cursor: pointer;
		padding: 4px;
		padding-right: 12px;

		&:hover {
			background-color: var(--l2-background);
			border-radius: 2px;
		}
	}
}
