/* Define brand */
:root,
[data-md-color-scheme="default"] {
    --md-default-bg-color: rgb(250, 250, 250);
    --md-primary-fg-color: rgb(255, 255, 255);
    --md-bg-color: rgb(233, 236, 251);
    --md-primary-fg-color--light: #5FFFD7;
    --md-primary-fg-color--dark: #E549FF;
    --md-primary-bg-color: rgba(0, 0, 0, .75);
    --md-primary-bg-color--light: rgba(0, 0, 0, .54);
    --md-accent-fg-color: #E549FF;
    --pg-light-border: rgb(229, 231, 235);
    --hb-hero-color: rgb(45, 45, 45);
}

:root,
[data-md-color-scheme="slate"] {
    --md-default-bg-color: rgb(26, 26, 27);
    --md-primary-fg-color: rgb(15, 15, 15);
    --md-primary-fg-color--light: #5FFFD7;
    --md-primary-fg-color--dark: #FCDB17;
    --md-primary-bg-color: rgba(0, 0, 0, .75);
    --md-primary-bg-color--light: rgba(0, 0, 0, .54);
    --md-accent-fg-color: #FCDB17;
    --pg-light-border: rgb(47, 47, 47);
    --hb-hero-color: #5FFFD7;
    /* --md-footer-bg-color--dark: var(--md-default-bg-color); */
}

/* Better contrast link colors */
[data-md-color-scheme="default"]>* {
    --md-typeset-a-color: #00B1BB;
}

[data-md-color-scheme="slate"]>* {
    --md-typeset-a-color: #5FFFD7;
}


/* || ------ CUSTOM STEPS LIST ------ */
.md-steps ol {
    margin: 0 !important;
    --bullet-size: calc(1.6 * 1rem);
    --bullet-margin: 0.375rem;
    list-style: none;
    counter-reset: counter(steps-counter) var(--sl-steps-start, 0);
    padding-inline-start: 0;
}

.md-steps>ol>li {
    margin: 0 !important;
    counter-increment: steps-counter;
    position: relative;
    padding-inline-start: calc(var(--bullet-size) + 1rem);
    padding-bottom: 1px;
    min-height: calc(var(--bullet-size) + var(--bullet-margin))
}

.md-steps>ol>li::before {
    content: counter(steps-counter);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--bullet-size);
    height: var(--bullet-size);
    line-height: var(--bullet-size);
    font-size: var(--md-300);
    font-weight: 600;
    text-align: center;
    color: var(--md-primary-fg-color--dark);
    background-color: var(--md-bg-color);
    border-radius: 99rem;
    box-shadow: inset 0 0 0 1px var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-steps>ol>li::before {
    background-color: rgb(31, 34, 50);
    box-shadow: inset 0 0 0 1px var(--md-primary-fg-color--dark);
}

.md-steps>ol>li:after {
    --guide-width: 1px;
    content: "";
    position: absolute;
    top: calc(var(--bullet-size) + (var(--bullet-margin)));
    bottom: var(--bullet-margin);
    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
    width: var(--guide-width);
    background-color: var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-steps>ol>li:after {
    background-color: var(--md-primary-fg-color--dark);
}