---
---

@use 'sass:color';
@use '../_sass/theme';
@use '../_sass/base';
@use '../_sass/layout';
@use '../_sass/monokai';
@use '../_sass/menu';
@use '../_sass/typography';

:root {
    --ngjs-figure-radius: 8px;                          // Border radius for figure elements
    --ngjs-focus-outline: 1px solid orange;             // Focus outline style
    --ngjs-marker-border-color: currentColor;           // Border color for selection marker
    --ngjs-marker-check-color: transparent;             // Background color for marker check
    --ngjs-selected-marker-color: orange;               // Color for selected marker
    --ngjs-selected-marker-check: black;                // Color for selected marker check
    --ngjs-link-bg: rgb(0, 0, 0, 0.7);                  // Background color for non-link titles
    --ngjs-link-color: white;                           // Text color for non-link titles
    --ngjs-link-radius: 4px;                            // Border radius for link buttons/anchors
    --ngjs-link-hover-bg: rgb(0, 0, 0);                 // Background color for link hover state
    --ngjs-link-hover-color: white;                     // Text color for link hover state
}

#search {
    flex: 1;
    font-size: 18px;
    padding: 15px;
    background: white;
    border: none;
    outline: none;
    box-sizing: border-box;
    border-radius: 4px;
}

#loadingBar {
    position: relative;
    flex: none;
    height: 6px;
    background: color.adjust(theme.$accent,  $lightness: -20%);

    &::after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 1s ease-in;
        background: linear-gradient(to right, theme.$primary 50%, theme.$accent 150%);
    }

    &.loading::after {
        opacity: 1;
        transition: none;
    }
}

.natural-gallery-js {
    margin-bottom: theme.$gap;
}

#version {
    display: inline-block;
    font-size:.8em;
    padding: 4px;
    color: #999999;
    position: relative;
    top: -5px;
    margin-left: 5px;
}

.toolbar-buttons {
    display:flex;
    .suggestions {
        flex:1
    }
}
