#dialog-qr-bar-code-config{
	padding: 15px;
}

/*switcher styles*/

#dialog-qr-bar-code-config .switcher{
	display: flex;
}

#dialog-qr-bar-code-config .switcher>*{
	width:50%;
	margin: 5px 0;
}

#dialog-qr-bar-code-config .switcher__options{	
	display: flex;
	align-items: center;
}

#dialog-qr-bar-code-config .switcher__options img{
	display: inline-block;
	width: 20px;
	height: 20px;
    filter: invert(17%) sepia(51%) saturate(389%) hue-rotate(188deg) brightness(94%) contrast(96%);
}

#dialog-qr-bar-code-config .switcher__text, 
#dialog-qr-bar-code-config label.toggle .label{
	padding: 10px;
	text-align: right;
    font-size: 18px;
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
}

#dialog-qr-bar-code-config .switcher .option *{
	margin:0;
}

#dialog-qr-bar-code-config .switcher .option{
	text-align: center;
	padding: 10px;
	margin: 0 10px 0 0;
	border-radius: 10px;
	line-height: 10px;
    border: 1px solid #292f48;
    transition: background-color .2s ease;
    cursor: pointer;
}

#dialog-qr-bar-code-config .switcher .option.selected{
	background-color: green;
	border: none;
}

#dialog-qr-bar-code-config .switcher .option.selected img{
	filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(183deg) brightness(96%) contrast(104%);
}

/*toggle styles*/

#dialog-qr-bar-code-config label.toggle {
    --width: 44px;
    --height: calc(var(--width) / 2);
    --border-radius: calc(var(--height) / 2);

    display: flex;
	align-items: center;
    cursor: pointer;
	margin: 0;
}

#dialog-qr-bar-code-config label.toggle>*{
	width: 50%;
}

#dialog-qr-bar-code-config .toggle__input {
    display: none;
}

#dialog-qr-bar-code-config .toggle__fill {
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background: #dcd9de;
    transition: background-color 0.2s;
}

#dialog-qr-bar-code-config .toggle__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: var(--height);
    width: var(--height);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border-radius: var(--border-radius);
    transition: transform 0.2s;
}

#dialog-qr-bar-code-config .toggle__input:checked ~ .toggle__fill {
    background: green;
}

#dialog-qr-bar-code-config .toggle__input:checked ~ .toggle__fill::after {
    transform: translateX(var(--height));
}