:root {
  --wotstat-background: #292929;
  --wotstat-accent: #4ee100;
  --wotstat-primary: #ffffff;
  --wotstat-secondary: #c4c4c4;
  --wotstat-separator: #c4c4c466;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}



.widgets-sdk-styles {
  hr {
    margin: 0.5em 0;
    border: 0;
    height: 0.05em;
    background: var(--wotstat-secondary);
    border-radius: 1em;
    opacity: 0.4;
  }
}

@mixin lib-style($class-name) {
  .wotstat-#{$class-name} {
    @content;
  }

  .widgets-sdk-styles {
    .#{$class-name} {
      @content;
    }
  }
}


@include lib-style('background') {
  background-color: var(--wotstat-background);
}

@include lib-style('accent') {
  color: var(--wotstat-accent);
}

@include lib-style('primary') {
  color: var(--wotstat-primary);
}

@include lib-style('secondary') {
  color: var(--wotstat-secondary);
}

@include lib-style('number') {
  text-wrap: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@include lib-style('autoscale') {
  font-size: 4vw;
}

@include lib-style('card') {
  background-color: var(--wotstat-background);
  color: var(--wotstat-primary);
  margin: 0;
  padding: 1em;
  border-radius: 1em;
}