.beacon {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;

	&::before {
		content: '';
		position: absolute;
		inset: 1px;
		border-radius: 50%;
		background: color-mix(in srgb, var(--primary-background) 20%, transparent);
	}

	&::after {
		content: '';
		position: absolute;
		left: 5px;
		top: 5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--primary);
	}
}

.custom-domain-card {
	width: 100%;
	max-width: 768px;
	border-radius: 4px;
	border: 1px solid var(--l1-border);
	background: var(--l2-background);
	overflow: hidden;

	&--loading {
		padding: var(--padding-3);
	}

	.custom-domain-card-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: var(--padding-3);
		gap: var(--spacing-6);

		.custom-domain-edit-button {
			border: 1px solid var(--l1-border);
			background: var(--l3-background);

			&:hover {
				background: var(--l3-background-hover);
			}
		}
	}

	.custom-domain-card-info {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-6);
	}

	.custom-domain-card-name-row {
		display: flex;
		align-items: center;
		gap: var(--spacing-5);
	}

	.custom-domain-card-org-name {
		color: var(--l1-foreground);
		font-size: var(--paragraph-base-500-font-size);
		font-weight: var(--paragraph-base-500-font-weight);
		line-height: var(--paragraph-base-500-line-height);
		letter-spacing: var(--paragraph-base-500-letter-spacing);
	}

	.custom-domain-card-meta-row {
		display: flex;
		align-items: center;
		gap: var(--spacing-10);
		padding-left: 18px;
	}

	.custom-domain-card-meta-row.workspace-name-hidden {
		padding-left: 0;
	}

	.custom-domain-card-meta-timezone {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-3);
		color: var(--l1-foreground);
		font-variant-numeric: lining-nums tabular-nums slashed-zero;
		font-feature-settings:
			'dlig' on,
			'salt' on;
		font-family: Inter;
		font-size: var(--paragraph-small-400-font-size);
		font-style: normal;
		font-weight: var(--paragraph-small-400-font-weight);
		line-height: var(--paragraph-small-400-line-height);
		letter-spacing: var(--paragraph-small-400-letter-spacing);
		text-transform: uppercase;

		svg {
			flex-shrink: 0;
			color: var(--l1-foreground);
		}
	}

	.custom-domain-callout {
		margin: 0 var(--margin-3) var(--margin-3);
		font-size: var(--paragraph-base-400-font-size);
		max-width: 742px;
		--callout-background: var(--primary);
		--callout-border-color: var(--callout-primary-border);
		--callout-icon-color: var(--primary);
		--callout-title-color: var(--callout-primary-title);
	}

	.custom-domain-card-divider {
		height: 1px;
		background: var(--l1-border);
		margin: 0;
	}
}

.workspace-url-dropdown {
	border-radius: 4px;
	border: 1px solid var(--l1-border);
	background: var(--l1-background);
	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
	padding: var(--padding-2) 0;
	min-width: 200px;
	display: flex;
	flex-direction: column;
}

.workspace-url-dropdown-header {
	color: var(--l2-foreground);
	font-size: var(--paragraph-base-400-font-size);
	line-height: var(--line-height-20);
	letter-spacing: -0.07px;
	padding: 0 var(--padding-3) var(--padding-2);
}

.workspace-url-dropdown-divider {
	height: 1px;
	background: var(--l1-border);
	margin-bottom: var(--margin-1);
}

.workspace-url-dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding: 5px var(--padding-3);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;

	&:hover {
		background: var(--l1-background-hover);

		.workspace-url-dropdown-item-label {
			text-decoration: underline;
		}

		.workspace-url-dropdown-item-external {
			opacity: 1;
		}
	}

	&--active {
		background: var(--l1-background-hover);
	}
}

.workspace-url-dropdown-item-external {
	color: var(--l2-foreground);
	flex-shrink: 0;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.workspace-url-dropdown-item-label {
	font-size: var(--paragraph-base-400-font-size);
	line-height: var(--line-height-20);
	letter-spacing: -0.07px;
	color: var(--l2-foreground);

	.workspace-url-dropdown-item--active & {
		color: var(--l1-foreground);
	}
}

.workspace-url-dropdown-item-check {
	color: var(--l1-foreground);
	flex-shrink: 0;
}

.edit-workspace-modal-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}

// Description
.edit-modal-description {
	margin: 0;
	color: var(--l1-foreground);
	font-size: var(--paragraph-base-400-font-size);
	line-height: var(--line-height-20);
	letter-spacing: -0.07px;
}

.edit-modal-link {
	color: var(--primary);

	&:hover {
		text-decoration: underline;
	}
}

// Input field group
.edit-modal-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.edit-modal-label {
	color: var(--l2-foreground);
	font-size: var(--paragraph-base-500-font-size);
	font-weight: var(--paragraph-base-500-font-weight);
	line-height: var(--paragraph-base-500-line-height);

	&--error {
		color: var(--destructive);
	}
}

.edit-modal-input-wrapper {
	display: flex;
	align-items: stretch;

	.edit-modal-input-field {
		flex: 1;
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
		padding: 6px var(--padding-3);
		background: var(--l1-background);
		border: 1px solid var(--l1-border);
		border-right: none;
		border-radius: 2px 0 0 2px;

		svg {
			flex-shrink: 0;
		}

		input {
			flex: 1;
			width: 100%;
			height: auto;
			background: transparent;
			border: none;
			border-radius: 0;
			outline: none;
			box-shadow: none;
			color: var(--l1-foreground);
			font-size: var(--paragraph-base-400-font-size);
			line-height: var(--line-height-20);
			padding: 0;

			&:focus,
			&:focus-visible {
				outline: none;
				box-shadow: none;
			}
		}
	}
}

.edit-modal-input-suffix {
	display: flex;
	align-items: center;
	padding: 6px var(--padding-3);
	background: var(--l2-background);
	border: 1px solid var(--l1-border);
	border-left: none;
	border-radius: 0 2px 2px 0;
	color: var(--l2-foreground);
	font-size: var(--paragraph-base-400-font-size);
	line-height: var(--line-height-20);
	white-space: nowrap;
}

.edit-modal-helper {
	color: var(--l2-foreground);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-20);

	&--error {
		color: var(--destructive);
	}
}

.edit-modal-status-icon {
	color: var(--l2-foreground);
}

.edit-modal-note {
	display: flex;
	gap: var(--spacing-6);
	align-items: flex-start;
	padding: var(--padding-3);
	border-radius: 4px;
	background: var(--l2-background);
}

.edit-modal-note-emoji {
	font-size: 16px;
	line-height: var(--line-height-20);
	flex-shrink: 0;
	margin-top: 2px;
}

.edit-modal-note-text {
	color: var(--l2-foreground);
	font-size: var(--paragraph-base-400-font-size);
	line-height: var(--line-height-20);
	letter-spacing: -0.07px;
}

.edit-modal-footer {
	.facing-issue-button {
		width: 100%;

		.periscope-btn {
			width: 100%;
			border-radius: 2px;
			background: var(--primary);
			border: none;
			color: var(--primary-foreground);
			font-size: var(--paragraph-base-500-font-size);
			font-weight: var(--paragraph-base-500-font-weight);
			line-height: var(--paragraph-base-500-line-height);
			height: 36px;

			.ant-btn-icon {
				display: none;
			}

			&:hover {
				background: var(--primary) !important;
				border: none !important;
				color: var(--primary-foreground) !important;
			}
		}
	}
}

.edit-modal-apply-btn {
	width: 100%;
}

.custom-domain-toast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 16px;
	height: 40px;
	width: min(942px, calc(100vw - 32px));
	border-radius: 4px;
	background: var(--primary-background);
	color: var(--bg-base-white);

	.custom-domain-toast-message {
		font-size: var(--paragraph-base-400-font-size);
		line-height: var(--line-height-20);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}

	.custom-domain-toast-actions {
		display: flex;
		align-items: center;
		gap: var(--spacing-4);
		flex-shrink: 0;
	}

	.custom-domain-toast-visit-btn {
		text-decoration: none;
		background: var(--bg-robin-600);

		&:hover {
			background: var(--primary-background-hover);
		}
	}

	.custom-domain-toast-dismiss-btn {
		color: var(--callout-primary-icon);
		height: 24px;
		width: 24px;

		&:hover {
			background: var(--primary-background-hover);
		}
	}
}
