dtx-monitors {
	display: flex;
	height: 100vh;
	padding: 80px 2px 0 12px;

	.weekday {
		--size: 24px;
		width: var(--size);
		height: var(--size);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		border: 1px solid var(--accent-light);

		&.active { background-color: var(--accent-light); }
	}
}

dtx-monitors-details {
	.row { gap: 12px; }
	.push-right { margin-left: auto; }

	scheduled, webhook { display: contents; }

	dtx-radio-group { margin: 0 auto 24px; }
	dtx-tab-page { display: contents; }
	.footer { margin-block: auto 20px; }

	.weekdays {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		border: 1px solid var(--border);
		border-radius: 12px;

		dtx-switch {
			position: relative;

			label {
				width: 40px;
                height: 40px;
                justify-content: center;
				border-radius: 50px;
				border: 1px dashed var(--accent);
				transition: .2s;
			}

			input {
				position: absolute;
				inset: 0;
				width: auto;
				height: auto;
				opacity: 0;
			}

			&:has(input:checked) label {
				border-style: solid;
				background-color: var(--accent-light);
			}
		}
	}

	.data-selection {
		gap: 2px;

		dtx-select { border-radius: 12px 4px 4px 12px; }
		dtx-button {
			height: 55px;
			border-radius: 4px 12px 12px 4px;
			background: var(--border);
		}
	}

	.compound-switch {
		display: flex;
		align-items: center;
		padding-left: 12px;
		height: 56px;
		border: 1px solid var(--border);
		border-radius: 12px;

		dtx-select, dtx-switch {
			width: fit-content;
			background: transparent;
			border: none;
		}
		dtx-select {
			margin-right: auto;
			.select-trigger { font-style: italic; }
		}
	}

	dtx-instructions-template .row { gap: 2px; }

	#actions-container {
		display: contents;

		action {
			position: relative;
			margin-top: 8px;
			transition: .2s;

			dtx-button[title="Delete Action"] {
				position: absolute;
				inset: -16px -16px auto auto;
				width: 20px;
				z-index: 1;
			}
			&:not(:hover) dtx-button[title="Delete Action"] {
				opacity: 0;
				pointer-events: none;
			}

			&:has(dtx-button[title="Delete Action"]:hover) {
				border-radius: 12px;
				box-shadow: 0 0 0 2px var(--error);
			}
		}
	}
	[label="Add Action"] { margin-top: 8px; }
}