@import 'colours.css.old';

[data-theme="dark"] div[id*='tree-'], [data-theme="dark"] div[class*='tree-'], [data-theme="dark"] div[id*='graph-'],
[data-theme="dark"] pre.mermaid, [data-theme="dark"] div.diagram, [data-theme="dark"] div[id*='alg-'] {
    background-color: var(--dark-container-bg-color);
    border-color: var(--dark-border-color);
}

[data-theme="light"] div[id*='tree-'], [data-theme="light"] div[class*='tree-'], [data-theme="light"] div[id*='graph-'],
[data-theme="light"] pre.mermaid, [data-theme="light"] div.diagram, [data-theme="light"] div[id*='alg-'] {
    background-color: var(--light-container-bg-color);
    border-color: var(--light-border-color);
}


div[id*='tree-'], div[class*='tree-'], div[id*='graph-'],
pre.mermaid, div.diagram, div[id*='alg-'] {
    display: flex;
    border-radius: 0.75rem;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0.025rem;
    margin: 0 auto 1rem auto;
    width: 100%;
}

[data-theme="dark"] div[id*='tree-']:before, [data-theme="dark"] div[class*='tree-']:before,
[data-theme="dark"] div[id*='graph-']:before, [data-theme="dark"] pre.mermaid:before,
[data-theme="dark"] div.diagram:before, [data-theme="dark"] div[id*='alg-']:before {
    background-color: var(--dark-header-title-bg-color);
    border-right-color: var(--dark-border-color);
}

[data-theme="light"] div[id*='tree-']:before, [data-theme="light"] div[class*='tree-']:before,
[data-theme="light"] div[id*='graph-']:before, [data-theme="light"] pre.mermaid:before,
[data-theme="light"] div.diagram:before, [data-theme="light"] div[id*='alg-']:before {
    background-color: var(--light-header-title-bg-color);
    border-right-color: var(--light-border-color);
}

div[id*='tree-']:before, div[class*='tree-']:before, div[id*='graph-']:before,
pre.mermaid:before, div.diagram:before {
    border-right-width: 0.025rem;
    border-right-style: solid;
    border-bottom-left-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
    content: "\F2EC";
    font-family: "bootstrap-icons";
    padding: 1rem;
}

/* Tree/Graphs */

div#explanation-dijkstra {
    margin-bottom: 1rem;
}

div[id*='tree-'] > div, div[class*='tree-'] > div, div[id*='graph-'] > div {
    margin: 0 auto 0 auto;
}

[data-theme="dark"] tr.line-highlight td {
    background-color: var(--dark-code-highlight) !important;
}

[data-theme="light"] tr.line-highlight td {
    background-color: var(--light-code-highlight) !important;
}

[data-theme="dark"] .weight-rect {
    fill: var(--dark-header-title-bg-color);
    stroke: var(--dark-border-color);
}

[data-theme="light"] .weight-rect {
    fill: var(--light-header-title-bg-color);
    stroke: var(--light-border-color);
}

[data-theme="dark"] g circle.node-shape {
    fill: var(--dark-header-title-bg-color);
    stroke: var(--dark-border-color);
}

[data-theme="light"] g circle.node-shape {
    fill: var(--light-header-title-bg-color);
    stroke: var(--light-border-color);
}

[data-theme="dark"] g text.label {
    fill: var(--dark-text-color);
}

[data-theme="light"] g text.label {
    fill: var(--light-text-color);
}

[data-theme="dark"] marker-end[id*='mermaid-'] {
    stroke: var(--dark-header-title-bg-color);
    fill: var(--dark-header-title-bg-color);
}

[data-theme="light"] marker-end[id*='mermaid-'] {
    stroke: var(--light-header-title-bg-color);
    fill: var(--light-header-title-bg-color);
}

[data-theme="dark"] g line.line, [data-theme="dark"] marker[id*='arrow'] {
    stroke: var(--dark-border-color);
    fill: var(--dark-border-color);
}

[data-theme="light"] g line.line, [data-theme="light"] marker[id*='arrow'] {
    stroke: var(--light-border-color);
    fill: var(--light-border-color);
}

[data-theme="dark"] .target {
    background-color: #711a13 !important;
    border-color: #b32b1e !important;
    fill: #711a13 !important;
    stroke: #b32b1e !important;
}

[data-theme="dark"] .target-text {
    color: #df6a5d !important;
    fill: #df6a5d !important;
}

[data-theme="light"] .target {
    background-color: #EC948D !important;
    border-color: #E1584C !important;
    fill: #EC948D !important;
    stroke: #E1584C !important;
}

[data-theme="light"] .target-text {
    color: #A42E20 !important;
    fill: #A42E20 !important;
}

[data-theme="dark"] .previous {
    background-color: #3d3c05 !important;
    border-color: #e2dc12 !important;
    fill: #3d3c05 !important;
    stroke: #e2dc12 !important;
}

[data-theme="dark"] .previous-text {
    color: #f1ec50 !important;
    fill: #f1ec50 !important;
}

[data-theme="light"] .previous {
    background-color: #FAF9C4 !important;
    border-color: #EDE61C !important;
    fill: #FAF9C4 !important;
    stroke: #EDE61C !important;
}

[data-theme="light"] .previous-text {
    color: #AEA90E !important;
    fill: #AEA90E !important;
}

[data-theme="dark"] .current {
    background-color: #1f2c6b !important;
    border-color: #2d3f9a !important;
    fill: #1f2c6b !important;
    stroke: #2d3f9a !important;
}

[data-theme="dark"] .current-text {
    color: #3f55c6 !important;
    fill: #3f55c6 !important;
}

[data-theme="light"] .current {
    background-color: #95A2E0 !important;
    border-color: #6577D2 !important;
    fill: #95A2E0 !important;
    stroke: #6577D2 !important;
}

[data-theme="light"] .current-text {
    color: #394FC0 !important;
    fill: #394FC0 !important;
}

[data-theme="dark"] .success {
    background-color: #275b10 !important;
    border-color: #297808 !important;
    fill: #275b10 !important;
    stroke: #297808 !important;
}

[data-theme="dark"] .success-text {
    color: #79bb5d !important;
    fill: #79bb5d !important;
}

[data-theme="light"] .success {
    background-color: #baefa3 !important;
    border-color: #a9f787 !important;
    fill: #baefa3 !important;
    stroke: #a9f787 !important;
}

[data-theme="light"] .success-text {
    color: #60a244 !important;
    fill: #60a244 !important;
}

/* Mermaid Diagrams */

svg[id*='mermaid-'] {
    margin: 0 auto 0 auto;
}

[data-theme="dark"] svg[id*='mermaid-'] .node rect, [data-theme="dark"] svg[id*='mermaid-'] .divider,
[data-theme="dark"] svg[id*='mermaid-'] .node circle {
    fill: var(--dark-header-title-bg-color) !important;
    stroke: var(--dark-border-color) !important;
}

[data-theme="light"] svg[id*='mermaid-'] .node rect, [data-theme="light"] svg[id*='mermaid-'] .divider,
[data-theme="light"] svg[id*='mermaid-'] .node circle {
    fill: var(--light-header-title-bg-color) !important;
    stroke: var(--light-border-color) !important;
}

[data-theme="dark"] svg[id*='mermaid-'] .edge-pattern-solid {
    stroke: var(--dark-border-color) !important;
}

[data-theme="light"] svg[id*='mermaid-'] .edge-pattern-solid {
    stroke: var(--light-border-color) !important;
}

[data-theme="dark"] svg[id*='mermaid-'] .relation {
    /*fill: var(--dark-header-title-bg-color) !important;*/
    stroke: var(--dark-border-color) !important;
}

[data-theme="light"] svg[id*='mermaid-'] .relation {
    /*fill: var(--light-header-title-bg-color) !important;*/
    stroke: var(--light-border-color) !important;
}

[data-theme="dark"] path {
    stroke: var(--dark-border-color) !important;
}

[data-theme="light"] path {
    stroke: var(--light-border-color) !important;
}

[data-theme="dark"] svg[id*='mermaid-'] .node polygon {
    fill: var(--dark-header-title-bg-color) !important;
    stroke: var(--dark-border-color) !important;
}

[data-theme="light"] svg[id*='mermaid-'] .node polygon {
    fill: var(--light-header-title-bg-color) !important;
    stroke: var(--light-border-color) !important;
}

[data-theme="dark"] .nodeLabel {
    color: var(--dark-text-color) !important;
}

[data-theme="light"] .nodeLabel {
    color: var(--light-text-color) !important;
}

[data-theme="dark"] g.cluster rect {
    fill: #3d3c05 !important;
    stroke: #e2dc12 !important;
}

[data-theme="light"] g.cluster rect {
    fill: #FAF9C4 !important;
    stroke: #EDE61C !important;
}

[data-theme="dark"] rect.label0 {
    background-color: #1f2c6b !important;
    border-color: #2d3f9a !important;
    fill: #1f2c6b !important;
    stroke: #2d3f9a !important;
}

[data-theme="light"] rect.label0 {
    background-color: #95A2E0 !important;
    border-color: #6577D2 !important;
    fill: #95A2E0 !important;
    stroke: #6577D2 !important;
}

[data-theme="dark"] circle.commit0 {
    background-color: #1f2c6b !important;
    border-color: #2d3f9a !important;
    fill: #1f2c6b !important;
    stroke: #2d3f9a !important;
}

[data-theme="light"] circle.commit0 {
    background-color: #95A2E0 !important;
    border-color: #6577D2 !important;
    fill: #95A2E0 !important;
    stroke: #6577D2 !important;
}

[data-theme="dark"] rect.label1 {
    fill: #3d3c05 !important;
    stroke: #e2dc12 !important;
}

[data-theme="light"] rect.label1 {
    fill: #FAF9C4 !important;
    stroke: #EDE61C !important;
}

[data-theme="dark"] circle.commit1  {
    fill: #3d3c05 !important;
    stroke: #e2dc12 !important;
}


[data-theme="light"] circle.commit1 {
    fill: #FAF9C4 !important;
    stroke: #EDE61C !important;
}

[data-theme="dark"] text tspan {
    fill: var(--dark-text-color);
}

[data-theme="light"] text tspan {
    fill: var(--light-text-color);
}

[data-theme="dark"] .commit-label-bkg {
    fill: var(--dark-header-title-bg-color) !important;
}

[data-theme="light"] .commit-label-bkg {
    fill: var(--light-header-title-bg-color) !important;
}

[data-theme="dark"] .commit-label{
    fill: var(--dark-text-color) !important;
}

[data-theme="light"] .commit-label{
    fill: var(--light-text-color) !important;
}

/* Linked List Diagrams */
.linked-list {
    background-color: unset;
    display: flex;
    flex-direction: row;
    margin: 0 auto 0 auto;
}

[data-theme="dark"] .linked-list > .node p {
    background-color: var(--dark-header-title-bg-color);
    border-color: var(--dark-border-color);
}

[data-theme="light"] .linked-list > .node p {
    background-color: var(--light-header-title-bg-color);
    border-color: var(--light-border-color);
}

.linked-list > .node p {
    align-items: center;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 0.025rem;
    display: inline-flex;
    flex-direction: row;
    margin: 1rem 0.5rem;
    padding: 1.25rem;
}

.linked-list > .node:after {
    content: "→";
    font-weight: 600;
}

.linked-list > .node.null p {
    background-color: unset !important;
    border-color: unset !important;
    border-width: 0 !important;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, serif !important;
}

.linked-list > .node.null:after {
    content: unset !important;
}

/* Walkthroughs */
input.button {
    border-radius: 0.75rem;
    padding: 0.5rem;
    width: 100%;
}

[data-theme="dark"] .highlight-line {
    background-color: var(--dark-code-highlight) !important;
}

[data-theme="light"] .highlight-line {
    background-color: var(--light-code-highlight) !important;
}

[data-theme="light"] input.button {
    background-color: #9CD99C;
    border-color: #6FC86F;
    color: #389438;
}

[data-theme="dark"] input.button {
    background-color: #266426;
    border-color: #379037;
    color: #6bc76b;
}

[data-theme="light"] input.button:hover {
    background-color: #48B948;
    border-color: #3B9B3B;
    color: #225922;
}

[data-theme="dark"] input.button:hover {
    background-color: #46b946;
    border-color: #64c464;
    color: #a6dda6
}

input.button {
    appearance: none;
    border-style: solid;
    border-width: 0.025rem;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 1.25rem;
    list-style: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
}

input.button:hover {
    text-decoration: none;
    transition-duration: 0.1s;
}

[data-theme="light"] input.button:disabled {
    background-color: #F5D7D6;
    border-color: #E79C97;
    color: #D96059;
}

[data-theme="dark"] input.button:disabled {
    background-color: #290b0a;
    border-color: #671d18;
    color: #a62c26;
}

input.button:disabled {
    cursor: default;
}

[data-theme="dark"] input.button:active {
    background-color: #266426;
}

[data-theme="light"] input.button:active {
    background-color: #9CD99C;
}

input.button:active {
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    transition: none 0s;
}

input.button:focus {
    outline: 1px transparent;
}

input.button:before {
    display: none;
}

input.button:-webkit-details-marker {
    display: none;
}

[data-theme="dark"] .node-list {
    background-color: var(--dark-container-bg-color);
    border-color: var(--dark-border-color);
}

[data-theme="light"] .node-list {
    background-color: var(--light-container-bg-color);
    border-color: var(--light-border-color);
}

.node-list {
    border-radius: 0.75rem;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0.025rem;
    display: flex;
    flex-direction: row;
    margin: 0.75rem auto 0.75rem auto;
    width: 100%;
}

[data-theme="dark"] .node-list:before {
    background-color: var(--dark-header-title-bg-color);
    border-color: var(--dark-border-color);
}

[data-theme="light"] .node-list:before {
    background-color: var(--light-header-title-bg-color);
    border-color: var(--light-border-color);
}

.node-list:before {
    border-right-width: 0.025rem;
    border-right-style: solid;
    border-bottom-left-radius: 0.75rem;
    border-top-left-radius: 0.75rem;
    font-family: "bootstrap-icons";
    padding: 1rem;
}

[class*="-search"]:before {
    content: "\F52A" !important;
}

[class*="-sort"]:before {
    content: "\F579" !important;
}

#temporary-number {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-right: 0.5rem;
}

[data-theme="dark"] .visited {
    background-color: #3d3c05 !important;
    border-color: #e2dc12 !important;
}

[data-theme="dark"] .visited:before {
    background-color: #3d3c05 !important;
    border-right-color: #e2dc12 !important;
}

[data-theme="light"] .visited {
    background-color: #FAF9C4 !important;
    border-color: #EDE61C !important;
}

[data-theme="light"] .visited:before {
    background-color: #FAF9C4 !important;
    border-right-color: #EDE61C !important;
}

.visited:before {
    content: "\F26D" !important;
}

[data-theme="dark"] .unvisited {
    background-color: #301d03 !important;
    border-color: #a1630b !important;
}

[data-theme="dark"] .unvisited:before {
    background-color: #301d03 !important;
    border-right-color: #8c5509 !important;
}

[data-theme="light"] .unvisited {
    background-color: #FCE9CF !important;
    border-color: #F8C987 !important;
}

[data-theme="light"] .unvisited:before {
    background-color: #FCE9CF !important;
    border-right-color: #F8C987 !important;
}

.unvisited:before {
    content: "\F629" !important;
}

[data-theme="dark"] div[class*="alg-"] .node {
    background-color: var(--dark-header-title-bg-color);
    border-color: var(--dark-border-color);
}

[data-theme="light"] div[class*="alg-"] .node {
    background-color: var(--light-header-title-bg-color);
    border-color: var(--light-border-color);
}

.node-list > .node, #temporary-number > .node {
    align-items: center;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 0.025rem;
    display: inline-flex;
    flex-direction: row;
    margin: 0.5rem 0 0.5rem 0.5rem;
    padding: 0.75rem;
}

[data-theme="dark"] .visited > .node {
    background-color: #8e8a0b !important;
    border-color: #c6c010 !important;
}

[data-theme="dark"] .visited > .node p {
    color: #f1ec50 !important;
}

[data-theme="light"] .visited > .node {
    background-color: #F4EF6F !important;
    border-color: #EFE939 !important;
}

[data-theme="light"] .visited > .node p {
    color: #AEA90E !important;
}

[data-theme="dark"] .unvisited > .node {
    background-color: #a9660a !important;
    border-color: #dd870e !important;
}

[data-theme="dark"] .unvisited > .node p {
    color: #f6bc74 !important;
}

[data-theme="light"] .unvisited > .node {
    background-color: #F5B256 !important;
    border-color: #F19B22 !important;
}

[data-theme="light"] .unvisited > .node p {
    color: #8A4F09 !important;
}

.node-list > .node > p, #temporary-number > .node > p {
    margin: 0;
    padding: 0;
}

.node-list > .null {
    align-items: center;
    display: flex;
}

.node-list > .null > p {
    margin: 0;
    padding: 0.5rem;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, serif !important;
}

div.row[id*="walkthrough-output"] > .column {
    border: unset !important;
    margin-top: -1rem;
    padding: 0;
}