//TODO: @each

@charset "utf-8";

@import "input-switch";
@import "_bulma-variables";

.has-switch {
	& > .switch {
		&.is-white,
		&.is-black,
		&.is-light,
		&.is-dark,
		&.is-primary,
		&.is-link,
		&.is-info,
		&.is-success,
		&.is-warning,
		&.is-danger {
			background-color: $switch-bulma-static-color;

			&.is-outline {
				background-color: $switch-transparent-color;
				border-color: $switch-bulma-static-color;
	
				&:before {
					background-color: $switch-bulma-static-color;
				}
			}
		}

		&.is-white:before {
			background-color: $switch-bulma-white-invert-color;
		}

		&.is-black:before {
			background-color: $switch-bulma-black-invert-color;
		}

		&.is-light:before {
			background-color: $switch-bulma-light-invert-color;
		}

		&.is-dark:before {
			background-color: $switch-bulma-dark-invert-color;
		}

		&.is-primary:before {
			background-color: $switch-bulma-primary-invert-color;
		}

		&.is-link:before {
			background-color: $switch-bulma-link-invert-color;
		}

		&.is-info:before {
			background-color: $switch-bulma-info-invert-color;
		}

		&.is-success:before {
			background-color: $switch-bulma-success-invert-color;
		}

		&.is-warning:before {
			background-color: $switch-bulma-warning-invert-color;
		}

		&.is-danger:before {
			background-color: $switch-bulma-danger-invert-color;
		}
	}

	& > input {
		&[type=checkbox], &[type=radio] {
			&:checked ~ .switch {
				&.is-white {
					background-color: $switch-bulma-white-color;

					&:before {
						background-color: $switch-bulma-white-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-white-color;

						&:before {
							background-color: $switch-bulma-white-color;
						}
					}
				}

				&.is-black {
					background-color: $switch-bulma-black-color;

					&:before {
						background-color: $switch-bulma-black-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-black-color;

						&:before {
							background-color: $switch-bulma-black-color;
						}
					}
				}

				&.is-light {
					background-color: $switch-bulma-light-color;

					&:before {
						background-color: $switch-bulma-light-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-light-color;

						&:before {
							background-color: $switch-bulma-light-color;
						}
					}
				}

				&.is-dark {
					background-color: $switch-bulma-dark-color;

					&:before {
						background-color: $switch-bulma-dark-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-dark-color;

						&:before {
							background-color: $switch-bulma-dark-color;
						}
					}
				}

				&.is-primary {
					background-color: $switch-bulma-primary-color;

					&:before {
						background-color: $switch-bulma-primary-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-primary-color;

						&:before {
							background-color: $switch-bulma-primary-color;
						}
					}
				}

				&.is-link {
					background-color: $switch-bulma-link-color;
			
					&:before {
						background-color: $switch-bulma-link-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-link-color;

						&:before {
							background-color: $switch-bulma-link-color;
						}
					}
				}

				&.is-info {
					background-color: $switch-bulma-info-color;
			
					&:before {
						background-color: $switch-bulma-info-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-info-color;

						&:before {
							background-color: $switch-bulma-info-color;
						}
					}
				}

				&.is-success {
					background-color: $switch-bulma-success-color;
			
					&:before {
						background-color: $switch-bulma-success-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-success-color;

						&:before {
							background-color: $switch-bulma-success-color;
						}
					}
				}

				&.is-warning {
					background-color: $switch-bulma-warning-color;
			
					&:before {
						background-color: $switch-bulma-warning-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-warning-color;

						&:before {
							background-color: $switch-bulma-warning-color;
						}
					}
				}

				&.is-danger {
					background-color: $switch-bulma-danger-color;
			
					&:before {
						background-color: $switch-bulma-danger-invert-color;
					}

					&.is-outline {
						border-color: $switch-bulma-danger-color;

						&:before {
							background-color: $switch-bulma-danger-color;
						}
					}
				}

				&.is-outline {
					background-color: $switch-transparent-color;
				}
			}
		}
	}
}