@use './mixins';

//note that link colors for unsplash-attribution are not
//using css variables, since that messes up default link colors
//when variables are unset

body{
    @include mixins.background_color_transition;
    --main-bg-color: white;
    --pinned-controls-bg-color: white;
    --main-text-color: black;
    --hint-text-color: #777;
    --link-text-color: #777;
    --main-text-color-rgb: 0, 0, 0;
    --disabled-text-color: #ddd;
    --border-color: #dee2e6;
    --pinned-controls-border-color: #dee2e6;
    --form-control-color: black;
    --form-control-bg-color: white;
    --form-control-color-scheme: light;
}
.editor-white{
    color: black;
    background-color: white;
    --main-bg-color: white;
    --pinned-controls-bg-color: white;
    --main-text-color: black;
    --main-text-color-rgb: 0, 0, 0;
    --disabled-text-color: #ddd;
    --border-color: #dee2e6;
    --pinned-controls-border-color: #dee2e6;
}
.editor-light{
    color: black;
    background-color: #ccc;
    --main-bg-color: #ccc;
    --pinned-controls-bg-color: #ddd; //this is intentionally different from the background color, so controls are slightly lighter
    --main-text-color: black;
    --link-text-color: #555;
    --disabled-text-color: #aaa;
    --main-text-color-rgb: 0, 0, 0;
    --border-color: #aaa;
    --pinned-controls-border-color: #bec2c6;
    --hint-text-color: #666;
}

.editor-dark{
    //tint of magenta #FF00FF
    color: #f0eff0;
    background-color: #444;
    --main-bg-color: #444;
    --pinned-controls-bg-color: #555; //this is intentionally different from the background color, so controls are slightly lighter
    --main-text-color: #f0eff0;
    --link-text-color: #cbc3cb;
    --main-text-color-rgb: 240, 239, 240;
    --disabled-text-color: #666;
    --border-color: #6a6a6a;
    --pinned-controls-border-color: #6a6a6a;
    --form-control-color: white;
    --form-control-bg-color: #222;
    --form-control-color-scheme: dark;
}

.editor-black{
    //tint of magenta #FF00FF
    color: #f0eff0;
    background-color: black;
    --main-bg-color: black;
    --pinned-controls-bg-color: black;
    --main-text-color: #f0eff0;
    --link-text-color: #c1b8c1;
    --main-text-color-rgb: 240, 239, 240;
    --disabled-text-color: #666;
    --border-color: #7a7a7a;
    --pinned-controls-border-color: #7a7a7a;
    --form-control-color: white;
    --form-control-bg-color: #222;
    --form-control-color-scheme: dark;
}
