/* Import WordPress component styles - these are handled by Vite */
@import '@wordpress/components/build-style/style.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	.interpolate-size-allow-keywords {
		interpolate-size: allow-keywords;
	}
}

body {
	font-family:
	  -apple-system, BlinkMacSystemFont, /* macOS/iOS system UI */
	  'Segoe UI', Roboto, /* Windows + Android system UI */
	  'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', /* emoji */
	  'Noto Sans', 'Arial Unicode MS', /* broad Unicode coverage */
	  sans-serif;
}

.app-drag-region {
	-webkit-app-region: drag;
}

.app-no-drag-region {
	-webkit-app-region: no-drag;
}

h1,
h2,
h3,
h4,
h5,
h6,
caption,
figcaption {
	text-wrap: balance;
}

p,
ul,
ol,
blockquote {
	text-wrap: pretty;
}

/* Tabs */
.components-tab-panel__tab-content {
	flex: 1;
	overflow: hidden;
}

.components-tab-panel__tabs {
	padding: 0 theme( 'spacing.4' );
	border-bottom: 1px solid theme( 'colors.a8c-gray.5' );
}

.components-tab-panel__tabs-item {
	height: 40px;
	margin-bottom: -1px;
}

.components-tab-panel__tabs--assistant::before {
	content: url( 'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2870_30744)"><path d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z" fill="black"/></g><defs><clip-path id="clip0_2870_30744"><rect width="14" height="14" fill="white"/></clip-path></defs></svg>' );
	display: inline-block;
	width: 14px;
	height: 14px;
	top: 16px;
}

.components-tab-panel__tabs--assistant:hover:not(:active)::before {
	content: url( 'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2870_30744)"><path d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z" fill="%233858E9"/></g><defs><clip-path id="clip0_2870_30744"><rect width="14" height="14" fill="white"/></clip-path></defs></svg>' );
}

.components-tab-panel__tabs-item.is-active::after {
	background: theme( 'colors.black' );
}

/* Customize scrollbar area for the sites sidebar and tab panel */
.sites-scrollbar::-webkit-scrollbar,
.components-tab-panel__tab-content::-webkit-scrollbar,
.assistant-textarea::-webkit-scrollbar {
	background: transparent;
	width: 10px;
}

/* Customize srollbar thumb appearance for the sites sidebar and tab panel */
.sites-scrollbar::-webkit-scrollbar-thumb {
	background: #ffffff26;
	border-radius: 10px;
	border: 2px solid rgba( 30, 30, 30, 1 );
}
.components-tab-panel__tab-content::-webkit-scrollbar-thumb,
.assistant-textarea::-webkit-scrollbar-thumb {
	background: #7f7f7f;
	border-radius: 10px;
	border: 2px solid white;
}

/* Add hover effect to thumb appearance on the scrollbar */
.sites-scrollbar::-webkit-scrollbar-thumb:hover {
	background: rgba( 255, 255, 255, 0.5 );
}
.components-tab-panel__tab-content::-webkit-scrollbar-thumb:hover,
.assistant-textarea::-webkit-scrollbar-thumb:hover {
	background: #484848;
}

/* Avoid selecting text on dropdown menu, like preview links */
.components-popover {
	user-select: none;
}

.components-popover__content {
	width: 100%;
}

/* Assistant messages */
.assistant-markdown {
	line-height: 1.4;
	word-wrap: break-word;
}

.assistant-markdown a {
	color: #3858e9;
}

.assistant-markdown a:hover,
.assistant-markdown a:focus {
	color: #2145e6;
	text-decoration: underline;
}

.assistant-markdown blockquote {
	background-color: theme( 'colors.a8c-gray.0' );
	border-radius: 2px;
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
}

.assistant-markdown blockquote > blockquote {
	background-color: theme( 'colors.a8c-gray.5' );
	margin: 0;
}

.assistant-markdown p {
	margin: 0 0 1rem;
}

.assistant-markdown code {
	background-color: theme( 'colors.a8c-gray.0' );
	color: #1d2327;
	font-family: 'Courier New', Courier, monospace;
	font-size: 13px;
	padding: 0.25rem;
	white-space: pre-wrap;
	border-radius: 2px;
}

.assistant-markdown code.file-block {
	color: theme( 'colors.a8c-blue.50' );
	fill: theme( 'colors.a8c-blue.50' );
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 3px;
	cursor: pointer;
}

.assistant-markdown code.file-block:hover {
	color: theme( 'colors.a8c-blue.70' );
	fill: theme( 'colors.a8c-blue.70' );
}

.assistant-markdown pre {
	background-color: theme( 'colors.a8c-gray.90' );
	border-radius: 5px;
	margin: 0 0 1rem 0;
	overflow-x: auto;
}

.assistant-markdown pre code {
	background-color: transparent;
	color: theme( 'colors.a8c-gray.0' );
	padding: 0;
}

.assistant-markdown h1,
.assistant-markdown h2,
.assistant-markdown h3,
.assistant-markdown h4,
.assistant-markdown h5,
.assistant-markdown h6 {
	margin: 1rem 0 0.5rem 0;
}

.assistant-markdown h1 {
	font-size: 1.2rem;
	font-weight: 500;
}

.assistant-markdown h2 {
	font-size: 1.1rem;
	font-weight: 600;
}

.assistant-markdown h3 {
	font-size: 1rem;
	font-weight: bold;
}

.assistant-markdown h4,
.assistant-markdown h5,
.assistant-markdown h6 {
	font-size: 0.875rem;
	font-weight: bold;
}

.assistant-markdown hr {
	border: none;
	border-top: 1px solid theme( 'colors.a8c-gray.5' );
	margin: 1rem 0;
}

.assistant-markdown ol {
	list-style-type: decimal;
	margin-block-end: 1rem;
	padding-inline-start: 1.5rem;
}

.assistant-markdown ul {
	list-style-type: disc;
	margin-block-end: 1rem;
	padding-inline-start: 1.5rem;
}

.assistant-markdown li {
	margin-bottom: 0.25rem;
}
.assistant-markdown li:last-child {
	margin-bottom: 0;
}

.assistant-markdown pre:last-child,
.assistant-markdown p:last-child,
.assistant-markdown ol:last-child,
.assistant-markdown ul:last-child {
	margin-bottom: 0;
}

.assistant-markdown table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	margin-top: 0;
	margin-bottom: 16px;
	width: max-content;
	max-width: 100%;
	overflow: auto;
}

.assistant-markdown tr {
	background-color: theme( 'colors.a8c-white.DEFAULT' );
	border-top: 1px solid theme( 'colors.a8c-gray.0' );
}

.assistant-markdown tr:nth-child( 2n ) {
	background-color: theme( 'colors.a8c-gray.0' );
}

.assistant-markdown td,
.assistant-markdown th {
	padding: 6px 13px;
	border: 1px solid theme( 'colors.a8c-gray.10' );
}

.assistant-markdown th {
	font-weight: 600;
}

.assistant-markdown table img {
	background-color: transparent;
}

.error-message {
	color: #D63638;
}

.error-select-control .components-input-control__backdrop {
	border-color: theme( 'colors.red.500' )!important;
}

.whats-new-modal .components-guide__footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
}

.components-button.components-guide__back-button {
	outline: none;
	border: 1px solid theme( 'colors.a8c-blue.50' );
}

.sync-dialog-wrapper .components-modal__header {
	border-bottom-color: #ddd;
}
