@use "sass:map";
////
// Cores padrão
////

$pallet: (
highlight: #6D212C, /*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.5) /*Tom de preto opaco*/
);

$palletModalCookies:(
highlight: #6D212C,
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.5)
);

$palletMinhaConta:(
highlight: #6D212C,
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.5),
pageBackground: #FAFAFA
);

$palletCheckout: (
highlight: #615091, /*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.5), /*Tom de preto opaco*/
borderRadius: 0px,
btnDefaultText: #5A5A5A,
btnDefaultBg: #F5F5F5,
btnDefaultBgHover: #DCDCDC,
btnSuccessText: #FFFFFF,
btnSuccessBg: #0EAF78,
btnSuccessBgHover: #0c9d6c,
btnCupomBg: #EEEEEE,
stepColor: #FFFFFF,
stepBackground: #6D212C,
);

$palletLivecommerce: (
highlight: #615091, /*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.5), /*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: 263px,
height: 45px
);

$produtosMax: (
p: 265px,
m: 620px,
g: 1365px, 
i: 365px
);

$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: (
Mulish-Regular: "Mulish-Regular",
Mulish-Bold: "Mulish-Bold",
Mulish-Light: "Mulish-Light",
Mulish-Medium: "Mulish-Medium", 
Mulish-Black: "Mulish-Black",
Mulish-SemiBold: "Mulish-SemiBold"
);

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

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