.tomo-toggle {
  margin-bottom: 20px;
}

.tomo-toggle__label {
  display: inline-block;
  margin-left: 20px;

  i[class^="tm"] {
    vertical-align: middle;
  }

  i.fa {
    font-size: 16px;
  }
}

.tomo-toggle__checkbox {
  display: none;

	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,

	& + .tomo-toggle__btn {
		&::selection {
			background: none;
		}
	}
  
	+ .tomo-toggle__btn {
		outline: 0;
		display: block;
		width: 4em;
		height: 2em;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
    
		&:after {
			left: 0;
		}
    
		&:before {
			display: none;
		}
	}
  
	&:checked + .tomo-toggle__btn:after {
		left: 50%;
	}
}

.tomo-toggle__checkbox {

	+ .tomo-toggle__btn {
    display: inline-block;
    vertical-align: middle;
		background: #f0f0f0;
		border-radius: 2em;
    padding: 2px;
    margin-bottom: 0;
    transition: all .4s ease;
    
		&:after {
			border-radius: 50%;
			background: #fff;
			transition: all .2s ease;
		}
	}
  
	&:checked + .tomo-toggle__btn {
    background: $color-primary;
	}
}
