//Colors
$white: #fff;
$black: #000;
$red: #E52313;
$orange: #F1943E;
$orange-tint: #EC8024;
$pink: #E21B4A;
$peach: #ffd3a8;
$green: #64BF5E;

$grey: #B3B3B3;

$red-tint: #bc5244;

//General settings
$font-color: $white;
$font-color-inverted: $black;



//Page settings
$page-background:$red;
$page-header-color: transparent;
$page-header-height: 4.4rem;
$page-content-padding: 0 1.5rem 1.5rem;
$game-background: radial-gradient(circle, rgba(218,41,26,1) 0%, rgba(218,41,26,1) 89%, rgba(218,41,26,1) 90%, rgba(170,30,24,1) 100%);
$game-background-vertical: $red;



//Input settings
$input-color: $white;
$input-background: transparent;
$input-height: 4.4rem;
$input-radius: 5rem;
$input-text-align: left;
$input-font-size: 1.6rem;
$input-label-height: $input-height;
$input-checkbox-color:$green;
$input-checkbox-stroke: 0.3rem;
$input-checkbox-height: 2.2rem;
$input-checkbox-width: 1rem;
$input-checkbox-rotation: 35deg;
$input-checkbox-offset-top: .3rem;
$input-checkbox-offset-left: .2rem;
$input-code-color: $white;
$input-code-padding: 0px 0.5rem;
$input-submit-background:$white;
$input-submit-color: $red;
$placeholder-color: rgba($black, .5);


//Modal settings
$modal-message-padding: 1.5rem;
$modal-message-max-width: 29rem;
$modal-header-height: 4.4rem;
$modal-header-center: 32rem;
$modal-content-center: 32rem;
$modal-content-padding: 1.5rem;
$modal-footer-height: 6rem;
$modal-footer-center: 32rem;

$modal-background:$white ;
$modal-font-color: $font-color-inverted;
$modal-footer-color: transparent;




//Card settings (Home ad cards)
$card-indexer-size: 0.6rem;
$card-indexer-space: .3rem;
$card-indexer-radius: .5rem;
$card-indexer-padding: 1.6rem;
$card-indexer-bottom: 0px;
$card-indexer-background: rgba(255, 255, 255, 0.4);
$card-indexer-border: none;
$card-indexer-active-background: #fff;
$card-indexer-active-border: $card-indexer-border;
$card-button-background: orange;
$card-button-border: none;;




//Button
$button-height: 3.4rem;
$button-width: 10rem;
$button-background-color: $orange ;
$button-border-color: $orange;

$page-background: #fff !default;

$page-center: true !default;

$page-header-height: 44px !default;
$page-header-color: #333 !default;
$page-header-center: 640px !default;
$page-header-vertical: false !default;

$page-content-center: 640px !default;
$page-content-vertical: false !default;
$page-content-padding: 15px !default;

$page-footer-height: 44px !default;
$page-footer-color: #ebebeb !default;
$page-footer-center: 640px !default;
$page-footer-vertical: false !default
	
@if $page-center == false{
	$page-header-center: 100%;
	$page-content-center: 100%;
	$page-footer-center: 100%;
}

.bm-container-page {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.bm-page {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	font-size: 1.6rem;
	background: $page-background;
	
	&.bm-page-header {
		padding-top: $page-header-height;
	}
	&.bm-page-footer {
		padding-bottom: $page-footer-height;
	}
	> div >.bm-block {
		position: relative;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.bm-header {
		position: absolute;
		top: 0px;
		left: 0px;
		height: $page-header-height;
		width: 100%;
		background-color: $page-header-color;
		box-sizing: border-box;
		> .bm-block {
			@if $page-header-center=='auto' {
				position: absolute;
				top: 0px;
				left: 50%;
				height: 100%;
				display: block;
				transform: translateX(-50%);
				@if $page-header-vertical {
					top: 50%;
					height: initial;
					transform: translateX(-50%) translateY(-50%);
				}
			}
			@else {
				max-width: $page-header-center;
			}
		}
	}
	.bm-content {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
        overflow: hidden;
		> .bm-block {
			padding: $page-content-padding;
			@if $page-content-center=='auto' {
				position: absolute;
				top: 0px;
				left: 50%;
				height: 100%;
				display: block;
				transform: translateX(-50%);
				@if $page-content-vertical {
					top: 50%;
					height: initial;
					transform: translateX(-50%) translateY(-50%);
				}
			}
			@else {
				max-width: $page-content-center;
			}
		}
	}
	.bm-footer {
		position: absolute;
		bottom: 0px;
		left: 0px;
		height: $page-footer-height;
		width: 100%;
		background-color: $page-footer-color;
		border-top: 1px solid darken($page-footer-color, 30%);
		box-sizing: border-box;
		> .bm-block {
			@if $page-footer-center=='auto' {
				position: absolute;
				top: 0px;
				left: 50%;
				height: 100%;
				display: block;
				transform: translateX(-50%);
				@if $page-footer-vertical {
					top: 50%;
					height: initial;
					transform: translateX(-50%) translateY(-50%);
				}
			}
			@else {
				max-width: $page-footer-center;
			}
		}
	}
}