/* These styles are generated from project.scss. */
@import url("./fonts/inter.css");
@import url("./colors.css");
@import url("./tooltip-arrow.css");

dialog:focus-visible {
	outline: none;
}

.alert {
	font-size: 14px;
	font-weight: 500;
}

.alert-danger {
	color: var(--signal);
}

.alert-debug {
	color: black;
	background-color: white;
	border-color: #d6e9c6;
}

.alert-error {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
}

body {
	font-size: 16px;
	margin: 0;
	font-family: "Inter", sans-serif;
}

/*
 * Image gallery and preview
 */

.image_selected {
	border: 2px solid #0066cc;
}

.htmx-request ~ .gallery-image {
	display: none;
}

.gallery-image-wrapper img:hover ~ .gallery-image-color-selection {
	opacity: 0.15;
}

.gallery-image-color-selection:hover > label:has(input:checked) {
	outline: 1px solid #fff;
}

.gallery-image-description p:empty::before,
#modal-description:empty::before {
	content: "<no description>";
}

.gallery-image-tags:empty::before {
	content: "<no tags>";
}

#modal-tags span::before {
	content: "#";
}
#modal-tags span {
	position: relative;
	padding: 2px 14px 2px 0px;
	max-width: 25em;
}
#modal-tags span:not([contenteditable]) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: break-word;
}
#modal-tags span[contenteditable] {
	overflow-wrap: break-word;
}

#modal-description[contenteditable]:focus,
#modal-description[contenteditable]:focus-visible,
#modal-tags span[contenteditable]:focus,
#modal-tags span[contenteditable]:focus-visible {
	padding: 0.125rem;
	background-color: #fff;
	border-radius: 0.375rem;
	outline: 1px solid #d1d5db;
	color: #6b7280;
}

#modal-tags span[contenteditable]:focus,
#modal-tags span[contenteditable]:focus-visible {
	display: inline-block;
	min-width: 5rem;
}

#modal-tags span[contenteditable]:focus::before,
#modal-tags span[contenteditable]:focus-visible::before {
	content: "";
	color: #e6e6e6;
	font-weight: 400;
}

#modal-tags span .remove-tag-button {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 12px;
	height: 12px;
	background-image: url("../images/close_button1.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 8px;
	background-color: rgba(183, 186, 190, 0.3);
	border-radius: 50%;
}

#modal-tags span:not(:hover) .remove-tag-button,
#modal-tags span[contenteditable]:focus .remove-tag-button,
#modal-tags span[contenteditable]:focus-visible .remove-tag-button {
	display: none;
}

#modal-tags
	span:not([contenteditable]):hover:has(.remove-tag-button:hover)::after {
	content: "Remove Tag";
	width: fit-content;
	white-space: nowrap;
}

#modal-tags span.removed-tag {
	display: none;
}

svg:hover .hover-stroke {
	stroke: var(--primary);
}

svg:hover .hover-fill {
	fill: var(--primary);
}

/* Styles for errors*/
.messages .error {
	color: #ef4444;
	background-color: #fee2e2;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 10px;
	border: 1px solid #ef4444;
}

.messages .success {
	color: #22c55e;
	background-color: #d1fae5;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 10px;
	border: 1px solid #22c55e;
}

.errors-notification {
	color: #ef4444;
	margin-top: 8px;
	font-size: 12px;
}

/*
   .highlight - for suggestion prompt
   .mention - for chat message mention
*/
.highlight,
.mention {
	color: var(--primary);
	font-weight: 600;
}

/* remote svg */

.masked-remote-svg {
	background: var(--bg, currentColor);
	-webkit-mask-image: var(--url);
	mask-image: var(--url);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-origin: content-box;
	mask-size: contain;
}

/* background image */

.bg-image {
	background-image: var(--bg, "");
	background-repeat: no-repeat;
	background-position: center;
}