$mobile_max: 580px;
$tablet_max: 860px;

// Calculates paddings * heights for the various bar sizes
@mixin bar-size( $base_size ) {

	font-size: $base_size * 2.5;

	.mctb-bar {
		padding: ($base_size * 1.25) ($base_size * 1.5);
	}

	.mctb-button {
		padding: $base_size ($base_size * 3);
	}

	input,
	.mctb-email,
	.mctb-label {
		padding: $base_size ($base_size * 1.5) !important;
	}

	label,
	input {
		font-size: $base_size * 3;
	}

	.mctb-close {
		padding: ($base_size) ($base_size * 3);
		font-size: $base_size * 4;
	}
}

#mailchimp-top-bar {

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}


	// Reset Form elements, many themes apply basic styling
	form,
	input,
	label {
		vertical-align: middle;
		margin: 0;
		padding: 0;
		box-shadow: none;
		text-shadow: none;
		font-size: 100%;
		outline: 0;
		height: auto;
		line-height: initial;
		float: none;
	}

	// Make label & field appear inline
	input,
	label {
		display: inline-block !important;
		vertical-align: middle !important;
		width: auto;
	}

	form{
		text-align: center;
		margin: 0 !important;
		padding: 0 !important;
	}

	label {
		margin: 0 6px 0 0;
	}

	input,
	input[type="text"],
	input[type="email"],
	.mctb-email,
	.mctb-button{
		margin: 0 0 0 6px;
		border: 1px solid white;
		background: white;
		height: auto;
	}

	.mctb-email {
		width: 100%;

		/* this is important because otherwise the field will stack horizontally */
		max-width: 240px !important;
	}

	.mctb-button {
		margin-left: 0;
		cursor: pointer;
	}

	.mctb-email-confirm {
		display: none !important;
	}

	/**
	* Bar Sizes
	*/

	// Small Bar
	&.mctb-small {
		@include bar-size(4px);
	}

	// Medium Bar
	&.mctb-medium {
		@include bar-size(5px);
	}

	// Big Bar
	&.mctb-big {
		@include bar-size(6px);
	}

	// bump everything to its own line on mobile screens
	@media( max-width: $mobile_max ) {
		input,
		label,
		.mctb-email,
		.mctb-label {
			width: 100%;
			max-width: 100% !important;
		}

		input,
		.mctb-email {
			margin: 6px 0 0 !important;
		}
	}

	// bump label to its own line on tablet when bar has 2+ input fields
	@media( max-width: $tablet_max ) {
		&.multiple-input-fields {
			.mctb-label {
				display: block !important;
				margin: 0 0 6px;
			}
		}
	}
}

.admin-bar {

	/* make sure z-index is slightly below that of admin bar (for dropdown items) */
	.mctb {
		z-index: 99998;
	}

	.mctb-position-top {
		top: 32px;

        @media screen and (max-width: 782px) {
            top: 46px;
        }

		&.mctb-sticky {
			/* admin bar is non-sticky on small screens */
			@media screen and (max-width: 600px) {
				top: 0;
			}
		}

	}
}

.mctb {
	position: absolute;
	top: 0;
	left: 0; right: 0;
	width: 100%;
	margin: 0;
	background: transparent;
	text-align: center;
	z-index: 100000;
}

.mctb-bar {
	position: relative;
	width: 100%;
}

.mctb-sticky {
	position: fixed;
}

.mctb-position-bottom {
	position: fixed;
	bottom: 0;
	top: auto;

	.mctb-bar {
		clear: both;
	}
}

.mctb-response {
	position: absolute;
	z-index: 100;
	top: 0; left: 0;
	width: 100%;
}

.mctb-close{
	display: inline-block;
	float: right;
	margin-right: 12px;
	cursor: pointer;
	clear: both;
	z-index: 10;
}

.mctb-icon-inside-bar {

	&.mctb-position-bottom .mctb-bar {
		position: absolute;
		bottom: 0;
	}

	.mctb-close {
		float: none;
		position: absolute;
		top: 0; right: 0;
	}
}