.tmpl-tidb-self-managed {
	.architecture-tabs {
		&__tab {
			display: flex;
			gap: 16px;
			align-items: center;
			padding: 10px 20px;
			cursor: pointer;
			transition: all var(--default-transition-params);
			@include media-min($medium) {
                gap: 8px;
				min-width: 300px;
				flex-direction: column;
				align-items: flex-start;
			}
            @include media-min($large){
                min-width: 380px;
            }
			&-image {
				position: relative;
				width: 32px;
				height: 32px;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
            &-text{
                flex: 1;
            }
			&-title {
				font-size: 22px;
				font-weight: 700;
				line-height: 30px;
				color: #fff;
				margin-bottom: 4px;
			}
			p {
				font-size: 16px;
				font-weight: 300;
				line-height: 24px;
				color: #fff;
			}
			&.red {
				border: 1px solid #dc150b;
				.architecture-tabs__tab-image {
					background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-red.svg);
				}
			}
			&.green {
				border: 1px solid #00bdba;
				.architecture-tabs__tab-image {
					background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-green.svg);
				}
			}
			&.violet {
				border: 1px solid #8446a3;
				.architecture-tabs__tab-image {
					background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-violet.svg);
				}
			}
			&.blue {
				border: 1px solid #3199fb;
				.architecture-tabs__tab-image {
					background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-blue.svg);
				}
			}
		}
	}
	.block-tabs-slide__tab.active {
		.architecture-tabs__tab.red {
			background: linear-gradient(105.54deg, #630d09 34.3%, #c91a12 110.23%);
			.architecture-tabs__tab-image {
				background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-red-active.svg);
			}
		}
		.architecture-tabs__tab.green {
			background: linear-gradient(107.22deg, #008684 33.95%, #00bdba 109.79%);
			.architecture-tabs__tab-image {
				background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-green-active.svg);
			}
		}
		.architecture-tabs__tab.violet {
			background: linear-gradient(286.52deg, #9e4ec4 -6.78%, #5b0088 68.47%);
			.architecture-tabs__tab-image {
				background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-violet-active.svg);
			}
		}
		.architecture-tabs__tab.blue {
			background: linear-gradient(285.17deg, #2c80ce 3.46%, #1155cc 66.14%);
			.architecture-tabs__tab-image {
				background-image: url(https://static.pingcap.com/files/2024/09/23004501/polygon-blue-active.svg);
			}
		}
	}
}