#yuto-settings {
	h1 {
		font-size: 32px;
		line-height: 40px;
		margin-bottom: 30px;
		font-weight: bold;
	}
	input,
	button,
	.components-card,
	.components-panel {
		border-radius: 4px;
	}
	.yuto {
		&__settings-tab-panel {
			display: flex;
			gap: 5%;

			.components-tab-panel {
				&__tabs {
					flex-basis: 15%;
				}

				&__tab-content {
					flex-basis: 80%;
				}

				&__tabs-item {
					&.is-active {
						background-color: #e6e6e6;
					}
				}
			}
		}

		&__connection-info {
			&__status {
				padding: 5px 10px;
				border-radius: 15px;

				&.success {
					background-color: #cff8dd;
				}
				&.error {
					background-color: rgb(255, 125, 125);
					color: #fff;
				}
			}
		}
	}
}

// Writing CSS for modal outside since it's outside the default div structure
.yuto {
	&__modal {
		&-progressbar {
			width: 100% !important;
			height: 10px !important;
			border-radius: 0 !important;

			div {
				background-color: color-mix(
					in srgb,
					var(--wp-components-color-foreground, #3858e9),
					transparent 10%
				);
				border-radius: 0;
			}
		}
		&-status {
			border: 1px solid rgba(0, 0, 0, 0.1);
			padding: 15px;
			margin-top: 2rem;
			border-radius: 4px;
		}

		&-spinner {
			margin: 0 !important;
		}

		&-success {
			.components-modal__header-heading-container {
				justify-content: center;
			}
		}
	}
}