/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

:root {
  /* Light theme colors */
  --color-primary2: #f3652b;
  --color-primary2-hover: #F5793F;
  --color-background: #ffffff;
  --color-text2: #333333;
  --color-text2-muted: #656565;
  --color-text-link: #3265cb;
  --color-text-link-hover: #2851a4;
  --color-background-dark: #171717;
  --color-background-light: #f8f8f8;
  --color-background-light2: #ebebeb;
  --color-background-light3: #ececec;
  --color-background-light4: #f6f6f6;
  --color-background-light5: #ececec;
  --color-background-code: #f7f7f7;
  --color-border2: #e5e5e5;
  --color-icon: #AAAAAA90;
  --color-selection-bg: #f3652b;
  --color-selection-text: #ffffff;
  --color-code2-background: #f6f6f6;
  /* Scrollbar colors */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;
  --scrollbar-thumb-hover: #a8a8a8;
  /* State Colors */
  --color-warning2: #f26464;
  --color-warning2-hover: #f2646420;
  /* Code */
  --color-code-function: #800080;
  --color-code-plain: #333333;
  --color-code-punctuation: #A9A9A9;
  --color-code-string: #189038;
  --color-code-property: #1d3ead;
  --color-code-operator: #cd0000;
  --color-code-number: #eb8869;
  --color-code-null: #cd0000;
  --color-code-boolean: #008cff;
  /* Lateral Menu */
  --menu-background: #fff;
  --menu-text: #000;
  --menu-title-size: 20px;
  --menu-item-size: 13px;
  --menu-item-line-height: 20px;
  --menu-padding: 12px;
  --menu-item-padding: 18px;
  --menu-border-radius: 4px;
  --menu-section-title-size: 16px;
  --menu-section-title-weight: 600;
}

[data-theme="dark"] {
  /* Dark theme colors */
  --color-primary2: #f3652b;
  --color-primary2-hover: #F5793F;
  --color-background: #1a1a1a;
  --color-text2: #ffffff;
  --color-text2-muted: #b3b3b3;
  --color-text-link: #93c5fd;
  --color-text-link-hover: #93c5fd;
  --color-background-dark: #171717;
  --color-background-light: #2d2d2d;
  --color-background-light2: #2d2d2d;
  --color-background-light3: #2d2d2d;
  --color-background-light4: #222222;
  --color-background-light5: #2c2c2c;
  --color-background-code: #1a1a1a;
  --color-border2: #333333;
  --color-icon: #AAAAAA90;
  --color-selection-bg: #f3652b;
  --color-selection-text: #ffffff;
  --color-code2-background: #242424;
  /* Scrollbar colors */
  --scrollbar-track: #2d2d2d;
  --scrollbar-thumb: #4d4d4d;
  --scrollbar-thumb-hover: #5d5d5d;
  /* Code */
  --color-purple: #9e3b9e;
  --color-code-function: #9e3b9e;
  --color-code-plain: #ffffff;
  --color-code-punctuation: #A9A9A9;
  --color-code-string: #4fab66;
  --color-code-property: #7c9bff;
  --color-code-operator: #cf5050;
  --color-code-number: #eb8869;
  --color-code-null: #cf5050;
  --color-code-boolean: #7cb7ff;
  /* State Colors */
  --color-warning: #f26464;
  --color-warning-hover: #f2646420;
  /* Lateral Menu */
  --menu-background: #1a1a1a;
  --menu-text: #ffffff;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::selection {
  background-color: var(--color-selection-bg) !important;
  color: var(--color-selection-text) !important;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1 0 0;
  overflow: hidden;
}

a {
    color: var(--color-text-link) !important;
}
a:hover {
    color: var(--color-text-link-hover) !important;
}

.sl-link {
    color: var(--color-text2) !important;
}
.sl-link:hover {
    color: var(--color-text-link) !important;
}

footer.footer {
  padding: 5px 5px 5px 15px;
  text-align: left;
  color: var(--color-text2-muted);
  font-size: 10pt;
  background-color: var(--color-background-dark) !important;
  a {
    color: var(--color-text2-muted);
  }
  a:hover {
    color: var(--color-text2);
  }
}

header .navbar.navbar-expand-md.navbar-dark.bg-dark {
  background-color: var(--color-background-dark) !important;
  padding: 0 32px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border2);
}

.sl-bg-canvas {
    background-color: var(--color-background) !important;
}

/* Custom Overrides for Stoplight Elements */
/* Root */
:root .sl-inverted,
[data-theme=light] .sl-inverted,
[data-theme=light] .sl-inverted .sl-inverted .sl-inverted {
    --color-canvas-dark: #2d3748;
    --color-canvas-pure: #0c1018;
    --color-canvas-tint: rgba(60, 76, 103, .2);
    --color-canvas-50: #666666;
    --color-canvas-100: var(--color-code2-background);
    --color-canvas-200: var(--color-background-light4);
    --color-canvas-300: #333333;
    --color-canvas-400: #262626;
    --color-canvas-500: #1a1a1a;
}

/* State Colors */
.sl-bg-warning {
    background-color: var(--color-warning2);
}
.sl-text-warning {
    color: var(--color-warning2);
}
.sl-text-warning:hover {
    background-color: var(--color-warning2-hover);
    color: var(--color-warning2);
}

/* Lateral Menu */
.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r {
    background-color: var(--menu-background);
    min-width: 320px;

    h4 {
        color: var(--menu-text);
        padding: 0 var(--menu-padding);
        font-size: var(--menu-title-size);
    }
    .sl-bg-canvas-100 {
        background-color: var(--menu-background);
    }
    .sl-bg-primary-tint {
        background-color: var(--color-border2);
    }
    .sl-overflow-y-auto.sl-w-full.sl-bg-canvas-100 {
        padding: 0 var(--menu-padding);
    }
    .sl-h-md {
        border-radius: var(--menu-border-radius);
        padding: var(--menu-item-padding);
    }
    .sl-h-md:hover {
        background-color: var(--color-background-light);
    }
    .sl-text-base {
        font-size: var(--menu-item-size);
        line-height: var(--menu-item-line-height);
        color: var(--menu-text);
    }
    .sl-font-bold.sl-uppercase {
        font-size: var(--menu-section-title-size);
        font-weight: var(--menu-section-title-weight);
        color: var(--menu-text);
        text-transform: capitalize;
    }
}
.ElementsTableOfContentsItem {
    background-color: var(--menu-background);
    color: var(--menu-text);

    .sl-text-base {
        font-size: var(--menu-item-size);
        color: var(--menu-text);
        line-height: var(--menu-item-line-height);
    }
    .sl-bg-primary-tint {
        background-color: var(--color-border2);
        border-radius: var(--menu-border-radius);
    }
    .sl-bg-canvas-100 {
        background-color: var(--menu-background);
    }
    svg {
        color: var(--color-primary2) !important;
        margin-left: 8px;
    }
}

/* Tag Title */
.sl-stack.sl-stack--horizontal.sl-rounded-lg.sl-bg-canvas-50.sl-stack--3.sl-inline-flex.sl-flex-row {
    background: var(--color-background-light);
}

/* Buttons */
button.sl-bg-primary {
    background-color: var(--color-primary2);
    padding: 16px;
    font-weight: 600;
    border-radius: 4px;
}
button.sl-bg-primary:hover {
    background-color: var(--color-primar2-hover);
}
button:focus {
    outline: 2px solid var(--color-primary2);
    outline-offset: 1px;
}
button.sl-text-body:hover {
    background: var(--color-background-light2) !important;
}

/* Inputs */
.sl-input input:focus {
    outline: 2px solid var(--color-primary2);
    border: none;
}

/* Stoplight Logo */
a.sl-flex.sl-items-center.sl-px-4.sl-py-3.sl-border-t {
    display: none !important;
}

/* Code Samples */
.sl-panel.sl-outline-none.sl-w-full.sl-rounded-lg {
    .sl-panel__titlebar {
        background-color: var(--color-background-light4) !important;
    }
    .sl-panel__content-wrapper.sl-bg-canvas-100 {
        background-color: var(--color-code2-background);
    }
}

.sl-menu {
    background-color: var(--color-background-light) !important;
}
.sl-text-on-code {
    color: var(--color-text2-muted) !important;
    background-color: var(--color-background-light1) !important;
}

/* Dark Mode Toggle */
:root {
  --bg-color: var(--color-background);
  --text-color: var(--color-text2);
  --primary-color: var(--color-primary2);
}

[data-theme="dark"] {
  --bg-color: var(--color-background);
  --text-color: var(--color-text2);
  --primary-color: var(--color-primary2);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.dark-mode-toggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 1rem;
  border-radius: 4px;
}

.dark-mode-toggle:hover {
  background-color: #2d2d2d;
}

[data-theme="dark"] .elements-api {
  --sl-color-gray-1: #2d2d2d;
  --sl-color-gray-2: #3d3d3d;
  --sl-color-gray-3: #4d4d4d;
  --sl-color-gray-4: #5d5d5d;
  --sl-color-gray-5: #6d6d6d;
  --sl-color-gray-6: #7d7d7d;
  --sl-color-gray-7: #8d8d8d;
  --sl-color-gray-8: #9d9d9d;
  --sl-color-gray-9: #adadad;
  --sl-color-gray-10: #bdbdbd;
  --sl-color-gray-11: #cdcdcd;
  --sl-color-gray-12: #dddddd;
  --sl-color-gray-13: #ededed;
  --sl-color-gray-14: #f5f5f5;
  --sl-color-gray-15: #fafafa;
}

/* TryItPanel */
.TryItPanel.sl-bg-canvas-100 {
    .ParameterGrid {
        label {
            color: var(--color-text2-muted) !important;
        }
        label[role="button"] {
            background-color: var(--color-primary2);
            padding: 5px 10px;
            font-weight: 600;
            border-radius: 4px;
            color: #fff !important;
            margin: 9px;
        }
        span {
            color: var(--color-text2-muted) !important;
        }
    }
}
.sl-inverted {
    .sl-panel__titlebar {
        color: var(--color-text2);
        background-color: var(--color-background-light5) !important;
    }
    .sl-text-danger-light {
        color: var(--color-warning2) !important;
    }
    .sl-panel__content {
        color: var(--color-text2-muted) !important;
    }
    button {
        background-color: var(--color-background-light2);
        color: var(--color-text2);
    }
    button:active {
        background-color: var(--color-background-light);
        color: var(--color-text2);
    }
    button:hover {
        background-color: var(--color-background-light);
        color: var(--color-text2);
    }
    button:focus {
        background-color: var(--color-background-light);
        color: var(--color-text2);
    }
    input {
        background-color: var(--color-background-light3);
        color: var(--color-text2);
    }
    input:focus {
        background-color: var(--color-background-light);
    }
    button.sl-bg-primary {
        background-color: var(--color-primary2);
        padding: 16px;
        font-weight: 600;
        border-radius: 4px;
        color: #fff !important;
    }
    button.sl-bg-primary:hover {
        background-color: var(--color-primary2-hover);
    }
    button:focus {
        outline: 2px solid var(--color-primary2);
        outline-offset: 1px;
    }
}


/* Code */
.sl-code-editor textarea {
    caret-color: var(--color-text2) !important;
}
pre {
    color: var(--color-text2-muted) !important;
    .function {
        color: var(--color-code-function) !important;
    }
    .plain {
        color: var(--color-code-plain) !important;
    }
    .punctuation {
        color: var(--color-code-punctuation) !important;
    }
    .string {
        color: var(--color-code-string) !important;
    }
    .operator {
        color: var(--color-code-operator) !important;
    }
    .property {
        color: var(--color-code-property) !important;
    }
    .number {
        color: var(--color-code-number) !important;
    }
    .null {
        color: var(--color-code-null) !important;
    }
    .boolean {
        color: var(--color-code-boolean) !important;
    }
}