/* =============================================================================
- Content Switcher
============================================================================= */
.gwel-content-switcher {
	.gwel-switcher-wrapper {
		display: flex;
		align-items: center;
		justify-content: var(--gwel-switcher--align, center);
		gap: var(--gwel-switcher--gap, 16px);
		.gwel-switcher {
			width: var( --gwel-switcher--size, 80px);
			height: calc( var( --gwel-switcher--size, 80px) / 2);
			border: 1px solid var(--gwel-switcher--border-c, #DADADA);
			background-color: var(--gwel-switcher--background-c, #ffffff);
			border-radius: 50px;
			position: relative;
			cursor: pointer;
			box-sizing: content-box;
			.gwel-bullet-wrapper {
				width: calc( var( --gwel-switcher--size, 80px) / 2);
				height: calc( var( --gwel-switcher--size, 80px) / 2);
				padding: 3px;
				position: absolute;
				top: 0;
				left: 0;
				transition: transform .3s ease;
			}
			.gwel-bullet {
				width: 100%;
				height: 100%;
				border-radius: 50px;
				background-color: var(--gwel-switcher--color, #000);

			}
			&.gwel-primary-active {
				.gwel-bullet-wrapper {
					transform: translateX(0);
				}
			}
			&.gwel-secondary-active {
				.gwel-bullet-wrapper {
					transform: translateX(100%);
				}
			}
		}
		.gwel-title {
			color: var(--gwel-switcher--title-c, inherit);
		}
		.gwel-badge {
			color: var(--gwel-switcher--badge-c, #000);
			background-color: var(--gwel-switcher--badge-background-c, #fff);
			padding: var(--gwel-switcher--badge-padding, 9px 12px);
			border-radius: var(--gwel-switcher--badge-radius, 3px);
		}
	}
	.gwel-content-wrapper {
		margin-top: var(--gwel-switcher--content-mt, 0px);
		.gwel-switcher-item-content {
			display: none;
			&.active {
				display: block;
				animation: gwel_content_switcher_fadeIn ease .5s;
			}
		}
		.gwel-simple-content {
			color: var(--gwel-switcher--content-c, #000000);
		}
	}
}

@keyframes gwel_content_switcher_fadeIn {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}