@use '../scss/_variables.scss' as *;

.adpresso-toggle-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: 1em;
}

.adpresso-toggle {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	background-color: $color-white;
	border-radius: $radius-pill;
	border: calc($border-small * $font-size-rate) solid $color-primary;
	transition: background-color 0.2s ease-in-out;
	cursor: pointer;
	padding: 0.5em;
	height: 30px;
	width: 54px;

	&.is-active {
		background-color: $color-primary;
		justify-content: flex-end;
		padding: 0.25em;
		transition: .2s;
	}

	&:focus {
		box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
	}
}

.adpresso-toggle__thumb {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: $color-primary;
	border-radius: 50%;
	transition: transform 0.2s ease-in-out;

	.is-active & {
		width: 22px;
		height: 22px;
		background-color: $color-white;
	}
}