.#{$prefix} {
	& &-topbar {
		background-image: linear-gradient(
			to right,
			rgba(var(--wpt-lms-primary-950), 1),
			rgba(var(--wpt-lms-primary-700), 1)
		);
		padding: 0.75rem 0;
		.#{$prefix}-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1.5rem;
			// Frontend header
			&-left {
				a {
					color: rgba(var(--wpt-lms-white));
					font-weight: 600;
				}
			}
			&-right {
				display: flex;
				align-items: center;
				gap: 0.938rem;
				.primary-menu {
					ul {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						gap: 1.25rem;
						li {
							a {
								color: rgba(var(--wpt-lms-white));
								font-weight: 500;
							}
						}
					}
				}
				.#{$prefix}-content-button {
					display: flex;
					align-items: center;
					gap: 0.938rem;

					.toggle-btn {
						background-color: transparent;
						border: none;
						display: none;
						padding: 0;
					}
					.cart-btn,
					.profile-btn {
						background-color: transparent;
						border: none;
						color: rgba(var(--wpt-lms-white));
						padding: 0;
					}
				}
			}
		}
	}
	& &-brand {
		width: auto;
		height: 2.5rem;
	}
}

// Frontend header responsive

@media (max-width: 964px) {
	.#{$prefix}-topbar {
		.#{$prefix}-wrapper {
			.#{$prefix}-content {
				&-right {
					.primary-menu {
						ul {
							display: none;
						}
					}
					.#{$prefix}-content-button {
						.toggle-btn {
							display: block;
						}
					}
				}
			}
		}
	}
}