$light: (
  elementBackgroundColor: #FFFFFF,
  textColor: #000000,
  mainBackground: #FBFCFD,
  secondaryColor:  #F4F3F4,
  buttonHoverBackground: #fafafa,
  chipBackground:#eaeaea,
  chipHoverBackground: #d5d5d5
);

$dark: (
  elementBackgroundColor: #353535,
  textColor: #FFFFFF,
  mainBackground: #303030,
  secondaryColor: #424242,
  buttonHoverBackground: #000000,
  chipBackground: #424242,
  chipHoverBackground: #2c2c2c
);

@mixin theme($theme-name) {
  @if $theme-name == 'light' {
    @each $name, $value in $light {
      --#{$name}: #{$value};
    }
  } @else if $theme-name == 'dark' {
    @each $name, $value in $dark {
      --#{$name}: #{$value};
    }
  }
}

@font-face {
  font-family: Roboto;
  src: url(./Roboto/Roboto-Light.ttf) format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: Roboto;
  src: url(./Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: Roboto;
  src: url(./Roboto/Roboto-Medium.ttf) format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: Inter-Light;
  src: url(./Inter-Light.ttf) format("opentype");
  font-weight: 300;
}

@font-face {
  font-family: Inter-Regular;
  src: url(./Inter-Regular.ttf) format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: Inter-Medium;
  src: url(./Inter-Medium.ttf) format("opentype");
  font-weight: 500;
}

@font-face { // todo: vsichkite imeto Inter, samo font-weight razlichno
  font-family: Inter-SemiBold;
  src: url(./Inter-SemiBold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: Inter;
  src: url(./Inter-ExtraBold.ttf) format("opentype");
  font-weight: 800;
}

h1,h2,h3,h4,h5 {
  margin: 0;
}

ui-big-number {
  display: inline-block;
}

ngx-skeleton-loader span.loader.progress{
  margin-bottom: 0;
}


html.theme-primary{
  @include theme('theme-primary')
}

html.theme-alternate{
  @include theme('theme-alternate')
}


.layout-container {
  background: var(--mainBackground) !important;
}

body{
  color: var(--textColor);
}