// main:../style.scss

/**
/// Frontend Style
**/

/**
 * Button Container
 *
 * These styles are common to all button containers, regardless of shape or style.
 */
.swfw-follow-container {
	display: flex;
	position: relative;

	.swfw-container-message {
		font-weight: bold;
	}

	&.swfw_square_container {
	  flex-flow: row wrap;
	}

	&.swfw_buttons_container {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: space-between;
	}

	&.swfw_block_container {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
}

/* This style is duplicated elsewhere in this code because it need prioirty.*/
.swfw-follow-container a {
	text-decoration: none;
}



@each $network, $color in $network_colors {
	div.swp-#{$network} {
		background: $color;
		border-color: darken( $color, $accent_variance );
		a {
			color: $color;
		}
		a:hover {
			background: darken( $color, $accent_variance );
			color: #ffffff;
		}
	}
}

/**
 * Individual Buttons
 *
 * These styles are common to all Follow buttons, regardless of shape or style.
 */

.swfw-follow-button {
	align-items: center;
	border-radius: 8px;
	display: flex;
	color: white;
	font-family: 'Helvetica', sans-serif;
	font-size: initial;
	justify-content: space-between;
	line-height: 1;
	margin-bottom: 10px;
	padding: 15px 5%;
	width: 90%;

	&.swp-snapchat, &.swp-snapchat a {
		color: black;
	}

	a {
		background: #fff;
		border-radius: 4px;
		transition: all 0.2s ease-in-out;

		:hover {
			color: white;
			&.swp-snapchat {
				color: black;
			}
		}
	}


	a,
	.swfw-text,
	.swfw-cta,
	.swfw-count {
		text-decoration: none !important;
	}

	.swfw-network-icon i {
		width: 32px;
		height: 32px;
		border-radius: 100px;
		font-size: 24px;
		line-height: 32px;
		text-decoration: none !important;
	}
}

/**
 * Square Buttons
 *
 */
.swfw_square_button {
	@extend .swfw-follow-button;
	width: 60px;
	height: 60px;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	margin: 5px;
	padding: 0;
	justify-content: center;
	border-radius: 4px;

	.swfw-network-icon {
		margin-top: -12px;
	}

	.swfw-text {
		width: 100%;
	}

	/* Use absolute so they occupy the same space in parent container swfw-text. */
	.swfw-cta,
	.swfw-count {
	  display: block;
	  width: 100%;
	  position: absolute;
	}

	.swfw-count {
	  opacity: 1;
	  transition: opacity 120ms 0;
	  font-size: 12px;
	}

	.swfw-cta {
	  opacity: 0;
	  transition: opacity 120ms 0;
	  font-size: 12px;
	}

	&:hover {
		.swfw-count {
		  opacity: 0;
		  transition: opacity 120ms 120ms;
		}

		.swfw-cta {
		  opacity: 1;
		  transition: opacity 120ms 120ms;
		}
	}
}


/**
 * Buttons buttons
 *
 */
.swfw_buttons_button {
	@extend .swfw-follow-button;
	display: flex;
	flex-flow: row nowrap;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	margin: 10px 5px;
	border-radius: 4px;
	padding: 5px 15px;
	color: white;

	.swfw-network-icon {
		padding: 0;
		font-size: 32px;
	}

	.swfw-text {
		width: -moz-max-content;
		width: -webkit-max-content;
		width: max-content;
		margin: 0 10px;
		transition: margin 300ms;
		display: flex;
		justify-content: center;
		line-height: 32px;
		color: white;

		.swfw-cta,
		.swfw-count {
			display: inline;
			position: relative;
			transition: all 300ms;
		}

		.swfw-cta {
		  width: 0;
		  overflow-x: hidden;
		  position: absolute;
		  color: transparent;
		  margin-right: 0;
		  font-weight: normal;
		}

		&:hover .swfw-cta {
			color: white;
		}
	}

	&.swp-snapchat .swfw-text {
		color: black;

		&:hover .swfw-cta {
			color: black;
		}
	}

	&:hover .swfw-text {
		width: -moz-max-content;
		width: -webkit-max-content;
		width: max-content;

		.swfw-cta {
			width: -moz-min-content;
			width: -webkit-min-content;
			width: min-content;
			overflow-x: visible;
			position: relative;
			margin-right: 10px;
			color: white;
		}

		&:hover .swfw-count {
		}
	}
}


/**
 * Block Buttons
 *
 */

/**
/// Mixins used by block variations.
**/

%cta-padding {
	padding: 10px 30px;
}

%swfw-block-inner-styles {
	.swfw-network-icon {
		margin-left: 10px;
		flex: 1;
	}

	.swfw-text {
		flex: 2;
	}

	.swfw-cta-button {
		flex: 1;

		a {
			padding: none;
			div {
				padding: 10px 30px;
				background: white;
				border-radius: 2px;
			}

			&:hover div {
				background: rgba(33, 33, 33, .3);
			}
		}
	}
}

.swfw_block_button {
	@extend .swfw-follow-button;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	cursor: initial;
	position: relative;

	> * {
		width: -moz-min-content;
		width: -webkit-min-content;
		width: min-content;
	}

	.swfw-network-icon {
		margin-left: 10px;
	}

	.swfw-text {
		font-size: 12px;
		line-height: 24px;
		left: calc(10px + 60px);  //* {parent margin} + {arbitrary amount}
		color: white;
		text-align: center;

	.swfw-count {
		width: -moz-max-content;
		width: -webkit-max-content;
		width: max-content;
		font-size: 15px;
	  }
	}


	&.swp-snapchat .swfw-text {
		color: black;
	}

	.swfw-cta {
		border-radius: 3px;

		a div {

		}
	}

  .swfw-cta-button {
	  font-size: 24px;
	  padding: 5px;
	  line-height: 24px;
	  border-radius: 4px;
	  text-align: center;
	  right: 0;

	  a {
		  text-decoration: none !important;
		  div {
			  font-size: 14px;
			  min-width: 100px;
			  border-radius: 3px;
			  background: white;
			  padding: 5px 15px;
		  }
	  }

	  a div:hover {
		  transition: opacity 200ms;
		  background: rgba(30, 30, 30, .3);
		  cursor: pointer;
		  color: white;
	  }
  }
}

/**
 * Leaf style
 */
.swfw-follow-button.swfw_leaf_button {
	@extend .swfw_block_button;
	border-top-left-radius: 21px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 21px;

	@extend %swfw-block-inner-styles;

	.swfw-network-icon {
		margin-left: 10px;
	}
}

/**
 * Pill style
 */
.swfw-follow-button.swfw_pill_button {
	@extend .swfw_block_button;
	border-radius: 50px;
	padding: 20px;

	@extend %swfw-block-inner-styles;


	.swfw-network-icon {
		margin-left: 10px;
	}

	.swfw-cta-button a {
		border-radius: 50px;

		div {
			border-radius: 50px;
		}
	}
}

/**
 * Shift style
 */

.swfw-follow-button.swfw_shift_button {
	@extend .swfw_block_button;
	transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-webkit-transform: skew(-20deg);

	@extend %swfw-block-inner-styles;

	div {
		transform: skew(20deg);
		-moz-transform: skew(20deg);
		-o-transform: skew(20deg);
		-webkit-transform: skew(20deg);
		align-items: center;
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.swfw-cta-button {
		transform: skew(0deg);

		a {
			padding: none;
			&:hover {
				background: rgba(33,33,33,.3);
			}
		}
		a div {
			background: none;
			transform: skew(20deg);
			padding: 10px 30px;

			&:hover {
				background: none;
			}
		}
	}
}



/**
/// Backend Style
**/

.swfw-revoke-button,
.swfw-authorization-button {
	width: 70%;
	text-align: center;
	max-width: 200px;
}

.swfw-input-field,
.swfw-follow-field {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	// width: 380px;
	height: 50px;
	margin: 15px auto;

}

.swfw-follow-field {
	&.swfw-inactive a {
		cursor: initial;
	}

	&.swfw-active a {
		cursor: pointer;
	}
}

.swfw-follow-field-icon {
	color: black;
	width: 40px;
	font-size: 40px;
	line-height: 42px;
	font-weight: bold;
	transition: all 200ms;
	border-radius: 3px;
	height: 40px;
	text-align: center;
	padding: 2px;


}

.swfw-widget label {
	font-size: 14px;
	width: 100px;
}

.swfw-follow-field label {
	text-align: right;
}


.swfw-input-field input,
.swfw-input-field select,
.swfw-follow-field input {
	padding: 10px;
	width: 50%;
	height: 100%;
	border-radius: 4px;
}


.swfw-follow-field.swfw-inactive div {
	background: white;
}

.swfw-follow-field.swfw-active div {
	color: white;
}