/* ==========================================================================
 * Variables
 * ========================================================================== */

/* This file needs cleaning up. Need alternative to inline svg to work with themes */

/* Navigation */
$navigation-width--sm: 4rem;
$navigation-width--lg: 18rem;

/* Z-Index */
$z-index--default: 1;
$z-index--navigation: 10;
$z-index--underlay: 50;
$z-index--slideout: 100;
$z-index--modal: 200;
$z-index--lightbox: 300;
$z-index--alerts: 9000;
$z-index--tooltip: 9999;

/* Colors */
$color-green--500: #31c903;
$color-red--500: #f53c20;
$color-yellow--500: #ffe21f;
$color-slate--50: #f5f7fa;

$brand-color--primary: $color-green--500;
$color-ui--4: #afafaf;
$color-ui--5: #8f8f8f;
$status-color-danger--default: $color-red--500;

/* Zoom level */
$reflow-zoom-level--150: 854px;
$reflow-zoom-level--200: 640px;
$reflow-zoom-level--250: 512px;
$reflow-zoom-level--400: 320px;

/* Background */
$box-shadow-focus--spaced:
  0 0 0 2px var(--mds-t-background-color--primary),
  0 0 0 4px var(--mds-d-color-brand--primary),
  0 4px 2px rgba($brand-color--primary / 50%);

:root {
  --mds-t-elevation--1: var(--mds-t-elevation-size--1)
    var(--mds-t-elevation-opacity--1);
  --mds-t-elevation--2: var(--mds-t-elevation-size--2)
    var(--mds-t-elevation-opacity--2);
  --mds-t-elevation--3: var(--mds-t-elevation-size--3)
    var(--mds-t-elevation-opacity--3);
  --mds-t-elevation--4: var(--mds-t-elevation-size--4)
    var(--mds-t-elevation-opacity--4);
  --mds-t-elevation-opacity--1: rgb(0 0 0 / 5%);
  --mds-t-elevation-opacity--2: rgb(0 0 0 / 7.5%);
  --mds-t-elevation-opacity--3: rgb(0 0 0 / 10%);
  --mds-t-elevation-opacity--4: rgb(0 0 0 / 12%);
  --mds-t-elevation-size--1: 0 1px 0.25rem;
  --mds-t-elevation-size--2: 0 2px 0.375rem;
  --mds-t-elevation-size--3: 0 2px 0.5rem;
  --mds-t-elevation-size--4: 0 3px 1rem;
  --mds-t-link-color--primary: var(--mds-t-text-color--accent);
  --mds-t-link-color--hover: var(--mds-t-text-color--accent);
  --mds-t-link-color--active: var(--mds-t-text-color--accent);
}