//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;

$card-background: #cacaca !default;
$card-space: 0px 10px !default;
$card-padding: 15px !default;
$card-shadow: 0px -4px 4px -4px rgba(0, 0, 0, 0.4) !default;

$card-indexer-size: 10px !default;
$card-indexer-space: 3px !default;
$card-indexer-radius: 5px !default;
$card-indexer-padding: 25px !default;
$card-indexer-bottom: 0px !default;

$card-indexer-background: #fff !default;
$card-indexer-border: 1px solid #333 !default;

$card-indexer-active-background: #cacaca !default;
$card-indexer-active-border: $card-indexer-border !default;

$card-button-size: 60px !default;
$card-button-background: #333 !default;
$card-button-radius: $card-button-size/2 !default;
$card-button-style: 3px solid #fff !default;
$card-button-border: 4px solid #fff !default;
$card-button-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) !default;


.bm-card-item{
    position: relative;
    width: 100%;
    height: 100%;
    
    >.bm-block{
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    &.bm-indexer{
        >.bm-block{
            padding-bottom: $card-indexer-padding;
        }
        .bm-indexer{
            position: absolute;
            bottom: $card-indexer-bottom;
            left: 50%;
            white-space: nowrap;
            transform: translate(-50%,0);
            height: $card-indexer-size;
            padding: 0px 5px;
            
            .bm-index{
                width: $card-indexer-size;
                height: $card-indexer-size;
                background-color: $card-indexer-background;
                display: inline-block;
                vertical-align: top;
                margin-right: $card-indexer-space;
                border-radius: $card-indexer-radius;
                border: $card-indexer-border;
                box-sizing: border-box;
                &.active{
                    background-color: $card-indexer-active-background;
                    border: $card-indexer-active-border;
                }
            }
            .bm-index:last-child{
                margin-right: 0px;
            }
        }
    }
    
    
    .bm-container{
        position: relative;
        width: 0%;
        height: 100%;
        width: 100%;
    }
    
    .bm-card{
        position: absolute;
        top: 4%;
        left: 0%;
        width: 100%;
        height: 96%;
        box-sizing: border-box;
        padding: $card-space;
        
        >.bm-block{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: $card-background;
            box-shadow: $card-shadow;
            padding: $card-padding;
            box-sizing: border-box;
            
            >.bm-image-box{
                margin: -$card-padding;
            }
        }
        &.card-layer-stacked>.bm-block{
            box-shadow: none;
        }
    }   
    
    
    .bm-card-button{
        position: fixed;
        width: $card-button-size/2;
        height: $card-button-size;
        top: 50%;
        transform: translate(0%,-50%);
        z-index: 20;
        *{
            pointer-events: none;
        }
        $size: $card-button-size/4;
        >div{
            width: $card-button-size;
            height: $card-button-size;
            background-color: $card-button-background;
            border-radius: $card-button-radius;
            box-shadow: $card-button-shadow;
            box-sizing: border-box;
            border: $card-button-border;
            >span{
                display: block;
                width: $size;
                height: $size;
                border: $card-button-style;
                box-sizing: border-box;
                position: absolute;
                top: $size*1.5;
                transform: rotate(45deg);
                transform-origin: center;
            }
        }
        
        $space: $size/2;
        
        &.prev{
            left: 0px;
            >div{
                margin-left: -$card-button-size/2;
                >span{
                    left: $space;
                    border-top: none;
                    border-right: none;
                }
            }
        }
        
        &.next{
            right: 0px;
            >div>span{
                right: $space;
                border-left: none;
                border-bottom: none;
            }
        }
    }
    
}