// Grays
$black: #000000;
$gray-darkest: #1c1c1c;
$gray-darker: #2c2c2c;
$gray-dark: #333333;
$gray: #666666;
$gray-light: #d6d6d6;
$gray-lighter: #ededed;
$white: #ffffff;

// Colors
$variant-colors: (
    primary: #e5287a,
    secondary: $gray-light,
    success: #4ba74b,
    warning: #fdbc41,
    danger: #ef5652,
    info: #0097c4,
);
$variant-text-colors: (
    primary: $black,
    secondary: $black,
    success: $black,
    warning: $black,
    danger: $black,
    info: $black,
);

$variant-color-primary: map-get($variant-colors, primary);
$variant-color-secondary: map-get($variant-colors, secondary);
$variant-color-success: map-get($variant-colors, success);
$variant-color-warning: map-get($variant-colors, warning);
$variant-color-danger: map-get($variant-colors, danger);
$variant-color-info: map-get($variant-colors, info);

// Page
$page-breakpoints: (
    // first value is <=, second <
    smallest: (0px, 375px),
    smaller: (375px, 576px),
    small: (576px, 768px),
    medium: (768px, 992px),
    large: (992px, 1200px),
    larger: (1200px, 1400px),
    largest: (1400px, null),
);
$page-container-widths: (
    smallest: 100%,
    smaller: 100%,
    small: 100%,
    medium: 768px,
    large: 992px,
    larger: 992px,
    largest: 992px,
);
$page-background-color: $gray-darkest;
$page-text-color: $gray-lighter;
$page-padding: 0.5em 0.5em 4.5em 0.5em;

// Links
$link-color: $variant-color-warning;
$link-hover-color: $variant-color-warning;

// Inputs
$input-background-color: $gray-lighter;
$input-text-color: $gray-darkest;
$input-placeholder-color: $gray-darkest;
$input-placeholder-opacity: 0.8;
$input-border: 0.1em solid $page-background-color;
$input-border-radius: 0.5em;
$input-focus-outline: 0.1em solid $variant-color-info;

$button-margin: 0.3em;
$button-padding: 0.25em 0.5em;
$button-border-radius: $input-border-radius;
$button-border-width: 0.15em;
$button-border-style: solid;
$button-outline-width: 0.15em;
$button-sizes: (
    small: 0.8em,
    medium: 1em,
    large: 1.15em,
);

// Navigation
$nav-bar-background-color: $gray-dark;
$nav-link-color: $page-text-color;
$nav-link-spacing: 1.5em;

$nav-header-padding: 0.75em;
$nav-header-logo-size: 2em;
$nav-header-logo-margin: 0 0.5em 0 0;

$nav-footer-padding: 0.75em;

// Statistics
$statistics-card-widths: (
    smallest: 100%,
    smaller: 80%,
    small: 50%,
    medium: 50%,
    large: 33.3333%,
    larger: 33.3333%,
    largest: 33.3333%,
);
$statistics-card-height: 4.5em;
$statistics-card-margin: 0.5em;
$statistics-card-padding: 0.3em 0.5em;
$statistics-card-border-radius: 0.5em;
$statistics-card-icon-size: 4em;
$statistics-card-icon-gap: 0.15em;
$statistics-card-value-font-size: 2.5em;

// Nodes filter panel
$nodes-filter-panel-pill-variant: success;
$nodes-filter-panel-pill-text-color: map-get($variant-text-colors, $nodes-filter-panel-pill-variant);
$nodes-filter-panel-pill-background-color: map-get($variant-colors, $nodes-filter-panel-pill-variant);
$nodes-filter-panel-pill-font-weight: bold;