.bd-settingsButton {
	position: absolute;
	z-index: 1;
	top: 22px;
	width: 70px;
	height: 48px;
	left: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .06);
	opacity: 1;

	.platform-darwin & { // sass-lint:disable-line class-name-format
		top: 27px;
	}

	.platform-linux & { // sass-lint:disable-line class-name-format
		top: 0;
	}

	.bd-settingsButtonBtn {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		width: 70px;
    height: 48px;
		cursor: pointer;
		filter: grayscale(100%);
		opacity: .5;
		position: relative;
		transition: all .3s cubic-bezier(.4,0,0,1);

		&::before,
		&::after {
			content:"";
			display: block;
			position: absolute;
			top:0;
			left:0;
			background-repeat: no-repeat;
			background-position: center;
		}

		&::before {
			width: 70px;
    	height: 48px;
			background-image: $logoSmallBw;
			background-size: 50% 50%;
			opacity: 1;
			transition:all .3s cubic-bezier(.4,0,0,1), opacity .01s;
		}
		&::after {
			width: 130px;
			height: 43px;
			background-image: $logoBigBw;
			background-size: 100% 100%;
			transform:translate(-7px,2px)scale(0.5);
			opacity: 0;
			transition:all .3s cubic-bezier(.4,0,0,1);
		}

		&:not(.bd-loading) {
			&:hover {
				filter: none;
				opacity: 1;
			}
		}

		&.bd-loading {
			animation: bd-settingsButtonPulse 1.5s infinite;
		}

		&.bd-updates {
			filter: hue-rotate(250deg) !important; // sass-lint:disable-line no-important
			opacity: 1 !important; // sass-lint:disable-line no-important
		}
	}

	&.bd-hideButton {
		animation: bd-fadeOut .4s ease-out;

		&.bd-active {
			animation: bd-fadeIn .4s ease-in;
		}

		&:not(.bd-active) {
			&:not(.bd-animating) {
				display: none;
			}
		}
	}

	&.bd-active {
		opacity: 1;
	}

	&.bd-active,
	&.bd-hideButton {
		background: transparent;
		box-shadow: none;

		.bd-settingsButtonBtn {
			filter: none;
			opacity: 1;
			width: 130px;
			height: 43px;
			transform:translate(25px,18px);
			cursor: default;
			&::before{
				opacity:0;
				transform:translate(-16px,-3px)scale(1.9);
				transition:all .3s cubic-bezier(.4,0,0,1), opacity .1s .3s;
			}
			&::after{
				opacity: 1;
				transform:scale(1);
			}
		}
	}

	&.bd-active,
	&.bd-animating {
		z-index: 3001;
	}
}
