$topbarHeight: 45px;

/* Cores */
$neutral: (
	color1: (light: #292929, dark: #fff),
	color2: (light: #7b7b7b, dark: #d0d0d0),
	color3: (light: #bcbcbc, dark: #acacac)
);

/*
	Temas:
*/
$themes: (
	cssVariable: (
		color1: var(--color1),
		color2: var(--color2),
		color3: var(--color3),
		color4: var(--color4),
		neutral1: var(--neutral1),
		neutral2: var(--neutral2),
		neutral3: var(--neutral3),
		logoDetail: var(--logoDetail),
		quickMenuBtnBackground: var(--contrast),
		quickMenuBackground: var(--quickMenuBackground),
		backgroundSideMenu: var(--bgColor),
		backgroundTopBar: var(--backgroundTopBar)
	), 
	theme1: (
		color1: #0747a6,
		color2: #eaf2f6,
		color3: #063c8e,
		color4: #ff991f,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #0747a6,
		quickMenuBtnBackground: #0747a6,
		quickMenuBackground: #063c8e,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme2: (
		color1: #e8c553,
		color2: #fff7e1,
		color3: #7f6c2e,
		color4: #292929,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #e8c553,
		quickMenuBtnBackground: #e8c553,
		quickMenuBackground: #fff7e1,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme3: (
		color1: #02ce69,
		color2: #e7f3f0,
		color3: #03914b,
		color4: #0e414c,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #02ce69,
		quickMenuBtnBackground: #02ce69,
		quickMenuBackground: #03914b,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme4: (
		color1: #c73444,
		color2: #fff4f5,
		color3: #972733,
		color4: #6900c3,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #c73444,
		quickMenuBtnBackground: #c73444,
		quickMenuBackground: #972733,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme5: (
		color1: #540095,
		color2: #f8f4fb,
		color3: #37085c,
		color4: #22c5f8,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #540095,
		quickMenuBtnBackground: #540095,
		quickMenuBackground: #37085c,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme6: (
		color1: #de6d28,
		color2: #fff9f6,
		color3: #a04e1d,
		color4: #5e39aa,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #de6d28,
		quickMenuBtnBackground: #de6d28,
		quickMenuBackground: #a04e1d,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme7: (
		color1: #ea4c89,
		color2: #fff3f8,
		color3: #a24267,
		color4: #3e39aa,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #ea4c89,
		quickMenuBtnBackground: #ea4c89,
		quickMenuBackground: #a24267,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	theme8: (
		color1: #000000,
		color2: #F5f5f5,
		color3: #3f3f3f,
		color4: #9d835e,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #000000,
		quickMenuBtnBackground: #000000,
		quickMenuBackground: #3f3f3f,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
		), 
	theme9: (
		color1: #3acbc7,
		color2: #f1fdfd,
		color3: #25a5a1,
		color4: #8d724b,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #f1fdfd,
		quickMenuBtnBackground: #3acbc7,
		quickMenuBackground: #25a5a1,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	), 
	/* Tema da Mobiage */
	theme10: (
		color1: #635596,
		color2: #F0EFF5,
		color3: #493E6E,
		color4: #A4CD39,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #635596,
		quickMenuBtnBackground: #635596,
		quickMenuBackground: #493E6E,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	),
	/* Tema do Finance */
	theme11: (
		color1: #00c74d,
		color2: #eff5f1,
		color3: #009338,
		color4: #223E6A,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #00c74d,
		quickMenuBtnBackground: #00c74d,
		quickMenuBackground: #009338,
		backgroundSideMenu: #f6f6f6,
		backgroundTopBar: #f6f6f6
	),
	/* Tema Kigi */
	theme12: (
		color1: #6e2bbb,
		color2: #eff5f1,
		color3: #582098,
		color4: #00bbbd,
		neutral1: map-get($map: map-get($map: $neutral, $key: color1), $key: light),
		neutral2: map-get($map: map-get($map: $neutral, $key: color2), $key: light),
		neutral3: map-get($map: map-get($map: $neutral, $key: color3), $key: light),
		logoDetail: #D6df24,
		quickMenuBtnBackground: #E81756,
		quickMenuBackground: #ba1546,
		backgroundSideMenu: #fcfcfc,
		backgroundTopBar: #fff
	)
);

/* 
	Cores padrão:
*/
$semantic: (
	error: #E81756,
	attention: #eec446,
	sucess: #82b517,
	info: #76b0ea
);

@function getColor($theme, $color) {
  @return map-get(map-get($themes, $theme), $color);
}

/* 
  Função para aplicar os temas pré-definidos acima
*/
@mixin themify($propriedade, $cor){
  @each $theme in map-keys($themes) {
    @each $selector in & {
      @at-root .#{$theme} #{$selector} {
        @content;
        #{$propriedade}: getColor($theme, $cor);
      }
    }
  }
}