/* Define base colors according to FW theme. Colors based on
https://flywheel.io */
:root {
    /* Deifne primary colors */
    --fw-primary--blue: #0d6efd;
    --fw-primary--indigo: #6610f2;
    --fw-primary--purple: #6f42c1;
    --fw-primary--purple-hsl: hsla(261, 51%, 51%, 0.1);
    --fw-primary--pink: #d63384;
    --fw-primary--red: #dc3545;
    --fw-primary--orange: #fd7e14;
    --fw-primary--yellow: #ffc107;
    --fw-primary--green: #198754;
    --fw-primary--teal: #20c997;
    --fw-primary--cyan: #0dcaf0;
    --fw-primary--white: #fff;
    --fw-primary--gray: #6c757d;
    --fw-primary--gray-dark: #343a40;
    --fw-primary--gray-100: #f8f9fa;
    --fw-primary--gray-200: #e9ecef;
    --fw-primary--gray-300: #dee2e6;
    --fw-primary--gray-400: #ced4da;
    --fw-primary--gray-500: #adb5bd;
    --fw-primary--gray-600: #6c757d;
    --fw-primary--gray-700: #495057;
    --fw-primary--gray-800: #343a40;
    --fw-primary--gray-900: #212529;
    --fw-primary--primary: #0d6efd;
    --fw-primary--secondary: #6c757d;
    --fw-primary--success: #198754;
    --fw-primary--info: #0dcaf0;
    --fw-primary--warning: #ffc107;
    --fw-primary--danger: #dc3545;
    --fw-primary--light: #f8f9fa;
    --fw-primary--dark: #212529;
    --fw-primary--primary-rgb: rgb(13,110,253);
    --fw-primary--primary-hsl: hsl(216, 98%, 52%, 0.1);
    --fw-primary--secondary-rgb: rgb(108,117,125);
    --fw-primary--success-rgb: rgb(25,135,84);
    --fw-primary--info-rgb: rgb(13,202,240);
    --fw-primary--warning-rgb: rgb(255,193,7);
    --fw-primary--danger-rgb: rgb(220,53,69);
    --fw-primary--light-rgb: rgb(248,249,250);
    --fw-primary--dark-rgb: rgb(33,37,41);
    --fw-primary--white-rgb: rgb(255,255,255);
    --fw-primary--black-rgb: rgb(0,0,0);
    --fw-primary--body-color-rgb: (33,37,41);
    --fw-primary--body-bg-rgb: rgb(255,255,255);
    --fw-primary--body-color: #212529;
    --fw-primary--body-bg: #fff;

    /* Define accent colors */
    --fw-accent-color--black: #000;
    --fw-accent-color--cyan-bluish-gray: #abb8c3;
    --fw-accent-color--white: #fff;
    --fw-accent-color--pale-pink: #f78da7;
    --fw-accent-color--vivid-red: #cf2e2e;
    --fw-accent-color--luminous-vivid-orange: #ff6900;
    --fw-accent-color--luminous-vivid-amber: #fcb900;
    --fw-accent-color--light-green-cyan: #7bdcb5;
    --fw-accent-color--vivid-green-cyan: #00d084;
    --fw-accent-color--pale-cyan-blue: #8ed1fc;
    --fw-accent-color--vivid-cyan-blue: #0693e3;
    --fw-accent-color--vivid-purple: #9b51e0;
    --fw-accent-color--alto: #ddd;
    --fw-accent-color--blue: #21759b;
    --fw-accent-color--cod-gray: #111;
    --fw-accent-color--dove-gray: #666;
    --fw-accent-color--gallery: #eee;
    --fw-accent-color--gray: #808080;
    --fw-accent-color--gray-alt: #929292;
    --fw-accent-color--light-yellow: #fff9c0;
    --fw-accent-color--mineshaft: #333;
    --fw-accent-color--silver: #ccc;
    --fw-accent-color--silver-chalice: #aaa;
    --fw-accent-color--whitesmoke: #f1f1f1;

    --fw--code--color--purple-dark: #6A1FAF;
    --fw--code--color--red-dark: #AF221F;
    --fw--code--color--green-dark: #65AF1F;
    --fw--code--color--cyan-dark: #1FADAF;
    --fw--code--color--purple-light: #AF73E6;
    --fw--code--color--red-light: #E67573;
    --fw--code--color--green: #ABE673;
    --fw--code--color--cyan-light: #73E4E6;

    --fw-accent-gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --fw-accent-gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --fw-accent-gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --fw-accent-gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --fw-accent-gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --fw-accent-gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --fw-accent-gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --fw-accent-gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --fw-accent-gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --fw-accent-gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --fw-accent-gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --fw-accent-gradient-midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);

    /* Define shadows */
    --fw-shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --fw-shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    /* --fw-shadow--sharp: 0.0rem 0.45rem 0.9rem rgba(0, 0, 0, 0.2); */
    --fw-shadow--sharp: 0.0em 0.4rem 0.2rem rgba(0, 0, 0, 0.2);
    --fw-shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --fw-shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

[data-md-color-scheme="flywheel-light"] {
    /* Default color shades */
    --md-default-fg-color:               var(--fw-primary--body-color);
    --md-default-fg-color--light:        var(--fw-primary--gray-900);
    --md-default-fg-color--lighter:      var(--fw-primary--gray-800);
    --md-default-fg-color--lightest:     var(--fw-primary--gray-700);
    --md-default-bg-color:               var(--fw-primary--body-bg);
    --md-default-bg-color--light:        var(--fw-primary--gray-100);
    --md-default-bg-color--lighter:      var(--fw-primary--gray-300);
    --md-default-bg-color--lightest:     var(--fw-primary--gray-500);

    /* Accent color shades. Also controls rendering of Mermaid diagrams */
    --md-accent-fg-color:                var(--fw-primary--purple);
    --md-accent-fg-color--transparent:   var(--fw-primary--purple-hsl); /* Controls mermaid block background */
    --md-accent-bg-color:                var(--fw-primary--white-rgb);
    --md-accent-bg-color--light:         hsla(#{rgb2hsl(var(--fw-primary--white-rgb))}, 0.7);
  
    /* Code color shades */
    --md-code-fg-color:                  var(--fw-primary--gray-700);
    --md-code-bg-color:                  var(--fw-primary--gray-100);
  
    /* Code highlighting color shades */
    --md-code-hl-color:                  hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.5);
    --md-code-hl-number-color:           var(--fw-primary--red);
    --md-code-hl-special-color:          var(-fw--code--color--cyan-dark);
    --md-code-hl-function-color:         var(--fw--code--color--green-dark);
    --md-code-hl-constant-color:         var(---fw--code--color--red-dark);
    --md-code-hl-keyword-color:          var(--fw--code--color--purple-dark);
    --md-code-hl-string-color:           var(--md-code-fg-color);
    --md-code-hl-name-color:             var(--md-code-fg-color);
    --md-code-hl-operator-color:         var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
    --md-code-hl-comment-color:          var(--md-default-fg-color--light);
    --md-code-hl-generic-color:          var(--md-default-fg-color--light);
    --md-code-hl-variable-color:         var(--md-default-fg-color--light);
  
    /* Typeset color shades */
    --md-typeset-color:                  var(--md-default-fg-color);
  
    /* Typeset `a` color shades */
    --md-typeset-a-color:                var(--fw-primary--indigo);
  
    /* Typeset `mark` color shades */
    --md-typeset-mark-color:             hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
  
    /* Typeset `del` and `ins` color shades */
    --md-typeset-del-color:              hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color:              hsla(150, 90%, 44%, 0.15);
  
    /* Typeset `kbd` color shades */
    --md-typeset-kbd-color:              hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color:       hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color:       hsla(0, 0%, 72%, 1);
  
    /* Typeset `table` color shades */
    --md-typeset-table-color:            hsla(0, 0%, 0%, 0.12);
    --md-typeset-table-color--light:     hsla(0, 0%, 0%, 0.035);
  
    /* Admonition color shades */
    --md-admonition-fg-color:            var(--md-default-fg-color);
    --md-admonition-bg-color:            var(--md-default-bg-color);
  
    /* Warning color shades */
    --md-warning-fg-color:              hsla(0, 0%, 0%, 0.87);
    --md-warning-bg-color:              hsla(60, 100%, 80%, 1);
  
    /* Footer color shades */
    --md-footer-fg-color:                hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light:         hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter:       hsla(0, 0%, 100%, 0.45);
    --md-footer-bg-color:                hsla(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark:          hsla(0, 0%, 0%, 0.32);
  
    /* Shadow depth 1 */
    --md-shadow-z1:                        var(--fw-shadow--natural);
  
    /* Shadow depth 2 */
    --md-shadow-z2:                         var(--fw-shadow--sharp);
  
    /* Shadow depth 3 */
    --md-shadow-z3:                         var(--fw-shadow--deep);
}


[data-md-color-scheme="flywheel-light"] .md-tag-icon {
    background-color: var(--fw-primary--purple);
    color: var(--fw-primary--white);
}

[data-md-color-scheme="flywheel-light"] .md-tag-icon::before {
    background-color: var(--fw-primary--white);
}

/* color highlighting for search bar results */
[data-md-color-scheme="flywheel-light"] article span mark {
    color: var(--fw-primary--white);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: underline;
    word-break: break-word;

}

[data-md-color-scheme="flywheel-dark"] {
    /* Default color shades */
    --md-default-fg-color:               var(--fw-primary--gray-400);
    --md-default-fg-color--light:        var(--fw-primary--gray-500);
    --md-default-fg-color--lighter:      var(--fw-primary--gray-600);
    --md-default-fg-color--lightest:     var(--fw-primary--gray-700);
    --md-default-bg-color:               var(--fw-primary--dark-rgb);
    --md-default-bg-color--light:        var(--fw-primary--gray-500);
    --md-default-bg-color--lighter:      var(--fw-primary--gray-300);
    --md-default-bg-color--lightest:     var(--fw-primary--gray-100);

    /* Accent color shades */
    --md-accent-fg-color:                var(--fw-primary--primary-rgb);
    --md-accent-fg-color--transparent:   hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.7);
    --md-accent-bg-color:                var(--fw-primary--white-rgb);
    --md-accent-bg-color--light:         hsla(#{rgb2hsl(var(--fw-primary--white-rgb))}, 0.7);
  
    /* Code color shades */
    --md-code-fg-color:                  var(--fw-primary--gray-400);
    --md-code-bg-color:                  var(--fw-accent-color--cod-gray);
  
    /* Code highlighting color shades */
    --md-code-hl-color:                  hsla(#{rgb2hsl(var(--fw-primary--primary-rgb))}, 0.5);
    --md-code-hl-number-color:           var(--fw-primary--red);
    --md-code-hl-special-color:          var(-fw--code--color--cyan-light);
    --md-code-hl-function-color:         var(--fw--code--color--green-light);
    --md-code-hl-constant-color:         var(---fw--code--color--red-light);
    --md-code-hl-keyword-color:          var(--fw--code--color--purple-light);
    --md-code-hl-string-color:           var(--md-code-fg-color);
    --md-code-hl-name-color:             var(--md-code-fg-color);
    --md-code-hl-operator-color:         var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
    --md-code-hl-comment-color:          var(--md-default-fg-color--light);
    --md-code-hl-generic-color:          var(--md-default-fg-color--light);
    --md-code-hl-variable-color:         var(--md-default-fg-color--light);
  
    /* Typeset color shades */
    --md-typeset-color:                  var(--md-default-fg-color);
  
    /* Typeset `a` color shades */
    --md-typeset-a-color:                var(--fw-primary--blue);
  
    /* Typeset `mark` color shades */
    --md-typeset-mark-color:             hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
  
    /* Typeset `del` and `ins` color shades */
    --md-typeset-del-color:              hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color:              hsla(150, 90%, 44%, 0.15);
  
    /* Typeset `kbd` color shades */
    --md-typeset-kbd-color:              hsla(0, 0%, 98%, 1);
    --md-typeset-kbd-accent-color:       hsla(0, 100%, 100%, 1);
    --md-typeset-kbd-border-color:       hsla(0, 0%, 72%, 1);
  
    /* Typeset `table` color shades */
    --md-typeset-table-color:            hsla(0, 0%, 98%, 0.12);
    --md-typeset-table-color--light:     hsla(0, 0%, 0%, 0.035);
  
    /* Admonition color shades */
    --md-admonition-fg-color:              var(--md-default-fg-color);
    --md-admonition-bg-color:              var(--md-default-bg-color);
  
    /* Warning color shades */
    --md-warning-fg-color:               hsla(0, 0%, 0%, 0.87);
    --md-warning-bg-color:               hsla(60, 100%, 80%, 1);
  
    /* Footer color shades */
    --md-footer-fg-color:                hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light:         hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter:       hsla(0, 0%, 100%, 0.45);
    --md-footer-bg-color:                hsla(0, 0%, 0%, 0.87);
    --md-footer-bg-color--dark:          hsla(0, 0%, 0%, 0.32);
  
    /* Shadow depth 1 */
    --md-shadow-z1:                        var(--fw-shadow--natural);
  
    /* Shadow depth 2 */
    --md-shadow-z2:                        var(--fw-shadow--sharp);
  
    /* Shadow depth 3 */
    --md-shadow-z3:                        var(--fw-shadow--deep);

    /* Tags */
    
}


[data-md-color-scheme="flywheel-dark"] .md-typeset li a{
    color: var(--fw-primary--gray-200);
    text-decoration: underline;
    text-decoration-color: var(--fw-primary--gray-600);
}

[data-md-color-scheme="flywheel-dark"] .md-typeset li a:hover{
    color: var(--fw-primary--gray-200);
    text-decoration: underline;
    text-decoration-color: var(--fw-primary--gray-200);
}

[data-md-color-scheme="flywheel-dark"] .md-tag-icon {
    background-color: var(--md-default-fg-color--lightest);
}

.md-header,.md-footer-nav {
    background-image: var(--fw-accent-gradient-midnight);
}

.md-footer {
    background-image: var(--fw-accent-gradient--vivid-cyan-blue-to-vivid-purple)
}

/* tag images with #center at the source to center them*/
img[src$="#center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-75"] {
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-50"] {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-25"] {
    width: 25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-125"] {
    width: 125%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* tag images with #center at the source to center them*/
img[src$="#center-150"] {
    width: 150%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Reference: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#with-animations */
@keyframes pulse {
    0%, 40%, 80%, 100% {
        transform: scale(1);
    }
    20%, 60% {
        transform: scale(1.15);
    }
}

.pulse {
    animation: pulse 1000ms infinite;
}