////
// Cores padrão
////

$pallet: (
highlight: #000000, /*Destaque*/
dark: #000000, /*Tons de Preto*/
medium: #F5F5F5, /*Tons de Cinza*/
light: #FFFFFF, /*Tons de Branco*/
textoDark: #000000, /*Tons de Preto*/
textoMedium: #5F5F5F, /*Tons de Cinza*/
textoLight: #FFFFFF, /*Tons de Branco*/ 
borders: #E5E5E5, /*Tons de Cinza*/
success: #0EAF78, /*Tons de Verde*/
error: #DE5D6C, /*Tons de Vermelho*/
backgroundModal: rgba(0, 0, 0, 0.1) /*Tom de preto opaco*/
);

$palletModalCookies:(
highlight: #000000,
dark: #000000,
medium: #F5F5F5,
light: #FFFFFF,
textDark: #000000,
textMedium: #5F5F5F,
textLight: #FFFFFF,
borders: #E5E5E5,
success: #0EAF78,
error: #DE5D6C,
borderRadius: 0px,
backgroundModal: rgba(0, 0, 0, 0.1)
);

$palletMinhaConta:(
highlight: #000000,
dark: #000000,
medium: #FAFAFA,
light: #FFFFFF,
textDark: #000000,
textMedium: #9A9A9A,
textLight: #FFFFFF,
borders: #E5E5E5,
success: #0EAF78,
warning: #E6A23C,
error: #DE5D6C,
info: #0d6efd,
borderRadius: 4px,
backgroundModal: rgba(0, 0, 0, 0.1),
pageBackground: #FAFAFA
);

$palletCheckout: (
highlight: #000000, /*Destaque*/ 
dark: #000000, /*Tons de Preto*/
medium: #F5F5F5, /*Tons de Cinza*/
light: #FFFFFF, /*Tons de Branco*/
textDark: #000000, /*Tons de Preto*/
textMedium: #5F5F5F, /*Tons de Cinza*/
textLight: #FFFFFF, /*Tons de Branco*/
inputBorderColor: #EFEFEF,
borders: #dcdcdc, /*Tons de Cinza*/
success: #0EAF78, /*Tons de Verde*/
warning: #E6A23C, /*Tons de Verde*/
error: #DE5D6C, /* Tons de Vermelho*/
backgroundModal: rgba(0, 0, 0, 0.1), /*Tom de preto opaco*/
borderRadius: 0px,
btnDefaultText: #5A5A5A,
btnDefaultBg: #F5F5F5,
btnDefaultBgHover: #DCDCDC,
btnSuccessText: #FFFFFF,
btnSuccessBg: #0EAF78,
btnSuccessBgHover: #0c9d6c,
btnCupomBg: #EEEEEE,
stepColor: #FFFFFF,
stepBackground: #000000,
);

$palletLivecommerce: (
highlight: #000000, /*Destaque*/
dark: #000000, /*Tons de Preto*/
medium: #F5F5F5, /*Tons de Cinza*/
light: #FFFFFF, /*Tons de Branco*/
textDark: #000000, /*Tons de Preto*/
textMedium: #9A9A9A, /*Tons de Cinza*/
textLight: #FFFFFF, /*Tons de Branco*/ 
borders: #E5E5E5, /*Tons de Cinza*/
success: #0EAF78, /*Tons de Verde*/
error: #DE5D6C, /*Tons de Vermelho*/
backgroundModal: rgba(0, 0, 0, 0.1), /*Tom de preto opaco*/
topBarColor: #F5F5F5
);

$palletAlert: (
dark: #000000,
medium: #F1F1F1,
light: #FFFFFF,
textDark: #000000,
textMedium: #5F5F5F,
textLight: #FFFFFF,
success: #0EAF78,
warning: #E6A23C,
error: #DE5D6C,
info: #0d6efd
);

$logoSize:(
width: 411px,
height: 52px
);

$produtosMax: (
p: 250px,
m: 506px,
g: 1342px, 
i: 372px
);

$highlight: map-get($pallet, highlight);
$dark: map-get($pallet, dark);
$medium: map-get($pallet, medium);
$light: map-get($pallet, light);
$textoDark: map-get($pallet, textoDark);
$textoMedium: map-get($pallet, textoMedium);
$textoLight: map-get($pallet, textoLight);
$borders: map-get($pallet, borders);
$success: map-get($pallet, success);
$error: map-get($pallet, error);
$backgroundModal: map-get($pallet, backgroundModal);

$logoWidth: map-get($logoSize, width);
$logoHeight: map-get($logoSize, height);

$maxP: map-get($produtosMax, p);
$maxM: map-get($produtosMax, m);
$maxG: map-get($produtosMax, g);
$maxI: map-get($produtosMax, i);

$fontes: (
NunitoSans-Regular: "NunitoSans-Regular",
NunitoSans-Bold: "NunitoSans-Bold",
NunitoSans-Light: "NunitoSans-Light",
NunitoSans-Black: "NunitoSans-Black",
NunitoSans-SemiBold: "NunitoSans-SemiBold"
);

@each $font-face, $font-name in $fontes  {
    @font-face {
        font-family: $font-face; font-style: normal; font-weight: normal; font-display: swap;
        src: url('../fonts/#{$font-name}.eot');
        src: url('../fonts/#{$font-name}.eot?') format('eot'),
            url('../fonts/#{$font-name}.woff') format('woff'),
            url('../fonts/#{$font-name}.ttf')  format('truetype'),
            url('../fonts/#{$font-name}.woff')  format('woff');
    }
}

$fontRegular: map-get($fontes, NunitoSans-Regular); 
$fontBold: map-get($fontes, NunitoSans-Bold);
$fontLight: map-get($fontes, NunitoSans-Light);
$fontMedium: map-get($fontes, NunitoSans-SemiBold);
$fontBlack: map-get($fontes, NunitoSans-Black);
$fontSemibold: map-get($fontes, NunitoSans-SemiBold);

.alert-success,
.alert-warning,
.alert-danger,
.alert-info{
    padding-left: 60px;
    font: normal 15px $fontBold;
    text-align: center;
    background-color: map-get($palletAlert, light);
    background-image: none;

    &:before{
        position: absolute;
        display: flex;
        content: "!";
        width: 50px;
        height: 100%;
        top: 0px;
        left: 0px;
        color: map-get($palletAlert, textLight);
        font: normal 34px $fontBold;
        align-items: center;
        justify-content: center;
    }
}
.alert-success{
    color: map-get($palletAlert, success);
    border: solid 2px map-get($palletAlert, success);
    &:before{
        background-color: map-get($palletAlert, success);
    }
}
.alert-warning{
    color: map-get($palletAlert, warning);
    border: solid 2px map-get($palletAlert, warning);
    &:before{
        background-color: map-get($palletAlert, warning);
    }
}
.alert-danger{
    color: map-get($palletAlert, error);
    border: solid 2px map-get($palletAlert, error);
    &:before{
        background-color: map-get($palletAlert, error);
    }
}
.alert-info{
    color: map-get($palletAlert, info);
    border: solid 2px map-get($palletAlert, info);
    &:before{
        background-color: map-get($palletAlert, info);
    }
}

////
// Helpers Placeholders
////
@function calcRatio($w,$h) {
    @return calc(#{$h} / #{$w} * 100%);
}

@keyframes skeleton-load{
    0%{
        background-color: rgba($dark, 0.1);
    }

    100%{
        background-color: rgba($dark, 0.3);
    }
}

%esconde-texto {
    text-indent: -999px;
    overflow: hidden; 
}

@mixin sprite() {
    display: inline-block; 
    background-image: url(../img/sprite.png);
}

@mixin sprite-avaliacao() {
    display: inline-block;
    background-image: url(../img/sprite-avaliacao.png);
}

@mixin transicao($tempo){
    -webkit-transition: all $tempo;
    -moz-transition: all $tempo;
    -ms-transition: all $tempo;
    -o-transition: all $tempo;
    transition: all $tempo;
}

@mixin borda($tamanho){
    -webkit-border-radius: $tamanho;
    -moz-border-radius: $tamanho;
    border-radius: $tamanho;
}

@mixin rotacao($graus){
    -webkit-transform: rotate($graus);
    -moz-transform: rotate($graus);
    -ms-transform: rotate($graus);
    -o-transform: rotate($graus);
    transform: rotate($graus);
}

@mixin gradiente($de, $para){
    background: $de;
    background: -webkit-linear-gradient(top, $de, $para);
    background: -webkit-gradient(top, $de, $para);
    background: -moz-linear-gradient(top, $de, $para);
    background: -o-linear-gradient(top, $de, $para);
    background: linear-gradient(top, $de, $para);
}

// checkout
$checkout: (
backgroundColorBox: $light,
backgroundColorConContent: $medium,
backgroundColorHeTopoCheckout: $light,
borderColorBox: $borders,
borderColorContent: $borders,
colorAtendimento: $textoMedium,
colorBoxLink: $textoDark,
colorBoxText: $textoMedium,
colorBoxTitle: $textoDark,
colorSubtitleSection: $textoMedium,
colorTitleSection: $textoDark,
);

// checkout - button actions
$checkoutButtonActions: (
backgroundColorBtnConfirmar: $light,
backgroundColorBtnConfirmarHover: $success,
colorBtnConfirmar: $textoMedium,
);

// checkout - endereco
$checkoutEndereco: (
backgroundColorBtnEntregar: $dark,
backgroundColorBtnEntregarHover: $success,
backgroundColorItemSelected: $medium,
borderColorBox: $borders,
colorBtnEntregar: $textoLight,
colorBoxText: $textoMedium,
colorLink: $textoDark,
);

//checkout - frete
$checkoutFrete: (
backgroundColorBtnCadastrar: $dark,
backgroundColorBtnCadastrarHover: $success,
backgroundColorItemSelected: $medium,
borderColorBox: $borders,
colorBoxText: $textoMedium,
colorBoxTitulo: $textoDark,
colorBoxVlFrete: $success,
);

$checkoutPagamento: (
backgroundColorItemSelected: $medium,
borderColorBox: $borders,
colorBoxText: $textoMedium,
colorLink: $textoDark,
/*backgroundColorPagamentoOpt: #048A7E,*/
/*backgroundColorTituloPagamentoOptActive: #FFFFFF,*/
/*borderColorPagamentoTextos: #DDDDDD,*/
/*colorPagamentoTextos: #333333,*/
/*colorTituloPagamentoOpt: #048A7E,*/
/*colorTituloPagamentoOptActive: #048A7E,*/
);
$checkoutRepresentante: (
backgroundColorItemSelected: $medium,
borderColorBox: $borders,
colorBoxText: $textoMedium,
colorLink: $textoDark,
/*backgroundColorPagamentoOpt: #048A7E,*/
/*backgroundColorTituloPagamentoOptActive: #FFFFFF,*/
/*borderColorPagamentoTextos: #DDDDDD,*/
/*colorPagamentoTextos: #333333,*/
/*colorTituloPagamentoOpt: #048A7E,*/
/*colorTituloPagamentoOptActive: #048A7E,*/
);
//checkout - resumo
$checkoutResumo: (
backgroundColorBoxProdutos: $light,
backgroundColorBoxTotaisSubTotais: $medium,
backgroundColorBtnEnviarCupom: $medium,
backgroundColorControle: $light,
backgroundColorTotal: $light,
backgroundColorResumoControleSeparator: $medium,
borderColorProdutoItem: $borders,
borderColorTotal: $borders,
colorBoxTotaisSubTotais: $textoMedium,
colorBtnEnviarCupom: $textoDark,
colorProdutoText: $textoMedium,
colorProdutoTitulo: $dark,
colorResumoControle: $textoMedium,
colorTotal: $textoDark,
);

//checkout - nav barra
$checkoutNavBarra:(
backgroundColor: $borders,
borderColor: $borders,
borderColorItem: $borders,
borderColorItemActive: $medium,
colorItem: $textoDark,
);

//checkout - cielo - opcoes de pagamento
$checkoutCieloOpcoesPagamento:(
backgroundColor: $dark,
backgroundColorOptionSelected: $dark,
color: $textoMedium,
colorOptionSelected: $textoDark,
);

//checkout - erede - opcoes de pagamento
$checkoutEredeOpcoesPagamento:(
backgroundColor: $dark,
backgroundColorOptionSelected: $dark,
color: $textoMedium,
colorOptionSelected: $textoDark,
);

//checkout - Marcado Pago - opcoes de pagamento
$checkoutMercadoPagoOpcoesPagamento:(
backgroundColor: $dark,
backgroundColorOptionSelected: $dark,
color: $textoMedium,
colorOptionSelected: $textoDark,
);

//checkout - Paypalplus - opcoes de pagamento 
$checkoutPayPalPlusOpcoesPagamento:(
backgroundColor: $dark,
backgroundColorOptionSelected: $dark,
color: $textoMedium,
colorOptionSelected: $textoDark,
);