@layer application {
	/* Discord-like Buttons */
	.control-panel {
		display: inline-flex;
		align-items: center;
		padding: 12px 20px;
		background-color: var(--container-bg-secondary);
		color: var(--container-link-color);
		text-decoration: none;
		border-radius: 4px;
		font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 500;
		transition: all 0.17s ease;
		border: none;
		cursor: pointer;
		white-space: nowrap;

		&:hover {
			background-color: var(--container-bg-accent);
			text-decoration: none;
		}
		&:active {
			background-color: var(--container-bg-accent);
		}

		&::before {
			content: '';
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' stroke='white' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='6' cy='8' r='1.5' fill='white'/%3E%3Crect x='9' y='7' width='6' height='2' rx='1' fill='white'/%3E%3Crect x='17' y='7' width='3' height='2' rx='1' fill='white'/%3E%3Crect x='4' y='11' width='4' height='2' rx='1' fill='white'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='white'/%3E%3Crect x='14' y='11' width='6' height='2' rx='1' fill='white'/%3E%3Crect x='4' y='15' width='3' height='2' rx='1' fill='white'/%3E%3Crect x='9' y='15' width='4' height='2' rx='1' fill='white'/%3E%3Ccircle cx='17' cy='16' r='1.5' fill='white'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		/* Large version */
		&.large {
			padding: 16px 24px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 600;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			&:hover {
				transform: translateY(-1px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
			}
			&:active {
				transform: translateY(0);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			&::before {
				width: 24px;
				height: 24px;
				margin-right: 12px;
			}
		}

		/* Compact version */
		&.compact {
			padding: 8px 16px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;

			&::before {
				width: 16px;
				height: 16px;
				margin-right: 6px;
			}
		}
	}

	/* Shared server badge styling */
	.server-badge {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
		min-width: 0;

		img {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			object-fit: cover;
			flex-shrink: 0;
			border: 2px solid var(--wash-accent);
		}

		h2 {
			font-size: 16px;
			font-weight: 600;
			color: var(--main-text-accent);
			margin: 0;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}