/*
This file is part of Vodka.

Vodka is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Vodka is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Vodka.  If not, see <https://www.gnu.org/licenses/>.
*/



.tag {
	display: none;
}

.tagholder {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.tag.exploded {
	background-color:var(--tag-background);
	color:var(--tag-editor-background);
	padding: 4px 8px 4px 8px;
	margin: 3px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	font-family: Courier;
	font-size: 9px;
}

/*
A tag vodka reads rather than one you wrote: the ordinary tag turned inside
out. Light box, dark text, dark edge in a light document, and the other way
round in a dark one -- which comes out of the tokens by itself, because an
ordinary tag is already dark on light in one theme and light on dark in the
other.

Inverting rather than colouring is what lets every instruction tag be marked
at once. A colour each would need eight of them, all different from the reds
and oranges already in use, and would still leave you learning which was
which; the only thing worth saying here is that this one is not a label.

After .tag.exploded so it wins on background.

(comment by Claude)
*/
.tag-special.exploded {
	background-color: var(--tag-special-background);
	color: var(--tag-special-text);
	/* a pixel off the padding, so the border does not resize the tag */
	/* (comment by Claude) */
	border: 1px solid var(--tag-special-text);
	padding: 3px 7px 3px 7px;
}

.tag-editing.exploded {
	background-color: var(--tag-editor-background);
	border: 1px solid var(--tag-background);
	padding: 3px 7px 3px 7px;
	color: var(--tag-editor-text);
}

.tag-ghost.exploded {
	background-color: var(--tag-editor-background);
	border: 1px solid var(--tag-background);
	padding: 3px 7px 3px 7px;
	color: var(--tag-editor-text);
}

/*
A tag being edited is already drawn inverted -- that is how you can see you are
in it -- which leaves a special tag being edited looking exactly like any other
tag being edited, and the one moment you most want to know whether vodka reads
this tag is while you are typing it.

So it inverts again, back to a dark box with light text, and keeps the border
that says it is being edited. Which makes the spelling visible as you go: type
`sampl` and nothing happens, `sample` and it flips, the second `s` keeps it,
and `samplesx` drops it again.

Last in the file, and naming both classes, so it beats the editing and ghost
rules above rather than relying on where it sits.

(comment by Claude)
*/
.tag-special.tag-editing.exploded,
.tag-special.tag-ghost.exploded {
	background-color: var(--tag-special-text);
	color: var(--tag-special-background);
	border: 1px solid var(--tag-special-background);
}

/*

for "ask tags" (switch colors?)

change tag styles:

padding: 0px 8px 0px 0px;
align-items: center;


.tag.exploded:before {
  content: ' ';
  border-top: 8px solid transparent;
  border-left: 10px solid var(--tag-arrow-left);
  border-bottom: 8px solid transparent;
  border-right: 4px solid transparent;
}

for "answer" tags:
padding: 0px 0px 0px 8px;
align-items: center;

.tag.exploded:after {
  content: ' ';
  border-top: 8px solid transparent;
  border-right: 10px solid var(--tag-arrow-right);
  border-bottom: 8px solid transparent;
  border-left: 4px solid transparent;
}


*/