.integrations-container {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	width: 100%;

	.integrations-content {
		width: calc(100% - 30px);
		max-width: 920px;

		.integrations-header {
			.title {
				color: var(--bg-vanilla-100);
				font-size: var(--font-size-lg);
				font-style: normal;
				line-height: 28px; /* 155.556% */
				letter-spacing: -0.09px;
				font-family: Inter;
				font-weight: 500;
			}

			.subtitle {
				color: var(--bg-vanilla-400);
				font-size: var(--font-size-sm);
				font-style: normal;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
				font-family: Inter;
				font-weight: 400;
			}

			.integrations-search-input {
				margin-top: 1rem;
				border-radius: 2px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-ink-300);

				.ant-input {
					background-color: unset;
				}
			}
		}

		.integrations-list {
			margin-top: 16px;

			.error-container {
				display: flex;
				border-radius: 6px;
				border: 1px solid var(--bg-slate-500);
				background: var(--bg-ink-400);
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.error-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					height: 300px;
					gap: 15px;

					.error-btns {
						display: flex;
						flex-direction: row;
						gap: 16px;
						align-items: center;

						.retry-btn {
							display: flex;
							align-items: center;
						}

						.contact-support {
							display: flex;
							align-items: center;
							gap: 4px;
							cursor: pointer;

							.text {
								color: var(--text-robin-400);
								font-weight: 500;
							}
						}
					}

					.error-state-svg {
						height: 40px;
						width: 40px;
					}
				}
			}

			.ant-list-items {
				gap: 16px;
				display: flex;
				flex-direction: column;
			}

			.integrations-list-item {
				display: flex;
				gap: 10px;
				padding: 16px;
				border-radius: 6px;
				border: 1px solid var(--bg-slate-500);
				background: var(--bg-ink-400);
				cursor: pointer;

				.list-item-image-container {
					height: 40px;
					width: 40px;
					flex-shrink: 0;
					border-radius: 2px;
					border: 1px solid var(--bg-ink-50);
					background: var(--bg-ink-300);
					display: flex;
					align-items: center;
					justify-content: center;

					.list-item-image {
						height: 24px;
						width: 24px;
					}
				}

				.list-item-details {
					display: flex;
					flex-direction: column;

					.heading {
						color: var(--bg-vanilla-100);
						font-family: Inter;
						font-size: 14px;
						font-style: normal;
						font-weight: 500;
						line-height: 20px; /* 142.857% */
						letter-spacing: -0.07px;
						margin-bottom: 8px;
					}

					.description {
						color: var(--bg-vanilla-400);
						font-family: Inter;
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 18px; /* 150% */
					}
				}

				.configure-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					align-self: flex-start;
					gap: 2px;
					flex-shrink: 0;
					width: 78px;
					height: 24px;
					padding: 6px 1px;
					border-radius: 2px;
					border: 1px solid #303540;
					background: var(--bg-ink-200);
					box-shadow: none;
					color: var(--bg-vanilla-400);
					font-family: Inter;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: 10px; /* 83.333% */
					letter-spacing: 0.12px;
				}
			}
		}
	}
}

.lightMode {
	.integrations-container {
		.integrations-content {
			.integrations-header {
				.title {
					color: var(--bg-ink-500);
				}
				.subtitle {
					color: var(--bg-slate-200);
				}
				.integrations-search-input {
					border: 1px solid rgba(53, 59, 76, 0.2);
					background: var(--bg-vanilla-100);
				}
			}

			.integrations-list {
				.error-container {
					border: 1px solid rgba(53, 59, 76, 0.2);
					background: var(--bg-vanilla-100);
				}

				.integrations-list-item {
					border: 1px solid rgba(53, 59, 76, 0.2);
					background: var(--bg-vanilla-100);

					.list-item-image-container {
						border: 1.111px solid var(--bg-vanilla-300);
						background: var(--bg-vanilla-100);
					}

					.list-item-details {
						.heading {
							color: var(--bg-ink-500);
						}

						.description {
							color: var(--bg-slate-200);
						}
					}

					.configure-btn {
						border: 1px solid rgba(53, 59, 76, 0.2);
						background: var(--bg-vanilla-200);
						color: var(--bg-ink-500);
					}
				}
			}
		}
	}
}
