@config "../tailwind.config.js";
@import "tailwindcss";

/* Preserve Tailwind 3 behavior: default border color was gray.200
the dark-mode stuff is actually an improvement over our previous design @tailwind 3 that we simply added
because we were in the process of fixing borders globally anyway */

@layer base {
  *, ::before, ::after {
    @apply border-gray-200 dark:border-slate-800;
  }
}

/* ibm-plex-sans-regular - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/ibm-plex-sans-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-italic - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/ibm-plex-sans-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-700 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/ibm-plex-sans-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-700italic - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../../fonts/ibm-plex-sans-v19-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-regular - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/ibm-plex-mono-v19-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/ibm-plex-mono-v19-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-700 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/ibm-plex-mono-v19-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-700italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  src: url('../../fonts/ibm-plex-mono-v19-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-right {
  display: none;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  right: 0;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-left {
  display: none;
  position: absolute;
  z-index: 1;
  left: 0;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content-left, .dropdown:hover .dropdown-content-right {
    display: flex;
}

.triangle-left {
    position:relative;
}

.triangle-left:before {
    content: "";
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent rgb(203 213 225) transparent transparent;
    position: absolute;
    left: -8px;
    top: 20px;
}

.triangle-left:after {
    content: "";
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent white transparent transparent;
    position: absolute;
    left: -6px;
    top: 20px;
}

/* Tailwind dark mode support */
[data-theme="dark"] .triangle-left:before {
    border-color: transparent rgb(71 85 105) transparent transparent;
}

[data-theme="dark"] .triangle-left:after {
    border-color: transparent rgb(51 65 85) transparent transparent;
}

/*
The below is the output of:

```
import pygments
with open("useme.css", 'w') as f:
    HtmlFormatter().get_style_defs(".syntax-coloring", f)
```
*/
pre { line-height: 125%; }
.syntax-coloring .c { color: #3D7B7B; font-style: italic } /* Comment */
.syntax-coloring .err { border: 1px solid #FF0000 } /* Error */
.syntax-coloring .k { color: #008000; font-weight: bold } /* Keyword */
.syntax-coloring .o { color: #666666 } /* Operator */
.syntax-coloring .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.syntax-coloring .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.syntax-coloring .cp { color: #9C6500 } /* Comment.Preproc */
.syntax-coloring .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.syntax-coloring .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.syntax-coloring .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.syntax-coloring .gd { color: #A00000 } /* Generic.Deleted */
.syntax-coloring .ge { font-style: italic } /* Generic.Emph */
.syntax-coloring .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.syntax-coloring .gr { color: #E40000 } /* Generic.Error */
.syntax-coloring .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.syntax-coloring .gi { color: #008400 } /* Generic.Inserted */
.syntax-coloring .go { color: #717171 } /* Generic.Output */
.syntax-coloring .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.syntax-coloring .gs { font-weight: bold } /* Generic.Strong */
.syntax-coloring .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.syntax-coloring .gt { color: #0044DD } /* Generic.Traceback */
.syntax-coloring .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.syntax-coloring .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.syntax-coloring .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.syntax-coloring .kp { color: #008000 } /* Keyword.Pseudo */
.syntax-coloring .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.syntax-coloring .kt { color: #B00040 } /* Keyword.Type */
.syntax-coloring .m { color: #666666 } /* Literal.Number */
.syntax-coloring .s { color: #BA2121 } /* Literal.String */
.syntax-coloring .na { color: #687822 } /* Name.Attribute */
.syntax-coloring .nb { color: #008000 } /* Name.Builtin */
.syntax-coloring .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.syntax-coloring .no { color: #880000 } /* Name.Constant */
.syntax-coloring .nd { color: #AA22FF } /* Name.Decorator */
.syntax-coloring .ni { color: #717171; font-weight: bold } /* Name.Entity */
.syntax-coloring .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.syntax-coloring .nf { color: #0000FF } /* Name.Function */
.syntax-coloring .nl { color: #767600 } /* Name.Label */
.syntax-coloring .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.syntax-coloring .nt { color: #008000; font-weight: bold } /* Name.Tag */
.syntax-coloring .nv { color: #19177C } /* Name.Variable */
.syntax-coloring .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.syntax-coloring .w { color: #bbbbbb } /* Text.Whitespace */
.syntax-coloring .mb { color: #666666 } /* Literal.Number.Bin */
.syntax-coloring .mf { color: #666666 } /* Literal.Number.Float */
.syntax-coloring .mh { color: #666666 } /* Literal.Number.Hex */
.syntax-coloring .mi { color: #666666 } /* Literal.Number.Integer */
.syntax-coloring .mo { color: #666666 } /* Literal.Number.Oct */
.syntax-coloring .sa { color: #BA2121 } /* Literal.String.Affix */
.syntax-coloring .sb { color: #BA2121 } /* Literal.String.Backtick */
.syntax-coloring .sc { color: #BA2121 } /* Literal.String.Char */
.syntax-coloring .dl { color: #BA2121 } /* Literal.String.Delimiter */
.syntax-coloring .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.syntax-coloring .s2 { color: #BA2121 } /* Literal.String.Double */
.syntax-coloring .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.syntax-coloring .sh { color: #BA2121 } /* Literal.String.Heredoc */
.syntax-coloring .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.syntax-coloring .sx { color: #008000 } /* Literal.String.Other */
.syntax-coloring .sr { color: #A45A77 } /* Literal.String.Regex */
.syntax-coloring .s1 { color: #BA2121 } /* Literal.String.Single */
.syntax-coloring .ss { color: #19177C } /* Literal.String.Symbol */
.syntax-coloring .bp { color: #008000 } /* Name.Builtin.Pseudo */
.syntax-coloring .fm { color: #0000FF } /* Name.Function.Magic */
.syntax-coloring .vc { color: #19177C } /* Name.Variable.Class */
.syntax-coloring .vg { color: #19177C } /* Name.Variable.Global */
.syntax-coloring .vi { color: #19177C } /* Name.Variable.Instance */
.syntax-coloring .vm { color: #19177C } /* Name.Variable.Magic */
.syntax-coloring .il { color: #666666 } /* Literal.Number.Integer.Long */

[data-theme="dark"] td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
[data-theme="dark"] .syntax-coloring .hll { background-color: #49483e }
[data-theme="dark"] .syntax-coloring { background: #272822; color: #F8F8F2 }
[data-theme="dark"] .syntax-coloring .c { color: #959077 } /* Comment */
[data-theme="dark"] .syntax-coloring .err { color: #ED007E; background-color: #1E0010 } /* Error */
[data-theme="dark"] .syntax-coloring .esc { color: #F8F8F2 } /* Escape */
[data-theme="dark"] .syntax-coloring .g { color: #F8F8F2 } /* Generic */
[data-theme="dark"] .syntax-coloring .k { color: #66D9EF } /* Keyword */
[data-theme="dark"] .syntax-coloring .l { color: #AE81FF } /* Literal */
[data-theme="dark"] .syntax-coloring .n { color: #F8F8F2 } /* Name */
[data-theme="dark"] .syntax-coloring .o { color: #FF4689 } /* Operator */
[data-theme="dark"] .syntax-coloring .x { color: #F8F8F2 } /* Other */
[data-theme="dark"] .syntax-coloring .p { color: #F8F8F2 } /* Punctuation */
[data-theme="dark"] .syntax-coloring .ch { color: #959077 } /* Comment.Hashbang */
[data-theme="dark"] .syntax-coloring .cm { color: #959077 } /* Comment.Multiline */
[data-theme="dark"] .syntax-coloring .cp { color: #959077 } /* Comment.Preproc */
[data-theme="dark"] .syntax-coloring .cpf { color: #959077 } /* Comment.PreprocFile */
[data-theme="dark"] .syntax-coloring .c1 { color: #959077 } /* Comment.Single */
[data-theme="dark"] .syntax-coloring .cs { color: #959077 } /* Comment.Special */
[data-theme="dark"] .syntax-coloring .gd { color: #FF4689 } /* Generic.Deleted */
[data-theme="dark"] .syntax-coloring .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
[data-theme="dark"] .syntax-coloring .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
[data-theme="dark"] .syntax-coloring .gr { color: #F8F8F2 } /* Generic.Error */
[data-theme="dark"] .syntax-coloring .gh { color: #F8F8F2 } /* Generic.Heading */
[data-theme="dark"] .syntax-coloring .gi { color: #A6E22E } /* Generic.Inserted */
[data-theme="dark"] .syntax-coloring .go { color: #66D9EF } /* Generic.Output */
[data-theme="dark"] .syntax-coloring .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
[data-theme="dark"] .syntax-coloring .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
[data-theme="dark"] .syntax-coloring .gu { color: #959077 } /* Generic.Subheading */
[data-theme="dark"] .syntax-coloring .gt { color: #F8F8F2 } /* Generic.Traceback */
[data-theme="dark"] .syntax-coloring .kc { color: #66D9EF } /* Keyword.Constant */
[data-theme="dark"] .syntax-coloring .kd { color: #66D9EF } /* Keyword.Declaration */
[data-theme="dark"] .syntax-coloring .kn { color: #FF4689 } /* Keyword.Namespace */
[data-theme="dark"] .syntax-coloring .kp { color: #66D9EF } /* Keyword.Pseudo */
[data-theme="dark"] .syntax-coloring .kr { color: #66D9EF } /* Keyword.Reserved */
[data-theme="dark"] .syntax-coloring .kt { color: #66D9EF } /* Keyword.Type */
[data-theme="dark"] .syntax-coloring .ld { color: #E6DB74 } /* Literal.Date */
[data-theme="dark"] .syntax-coloring .m { color: #AE81FF } /* Literal.Number */
[data-theme="dark"] .syntax-coloring .s { color: #E6DB74 } /* Literal.String */
[data-theme="dark"] .syntax-coloring .na { color: #A6E22E } /* Name.Attribute */
[data-theme="dark"] .syntax-coloring .nb { color: #F8F8F2 } /* Name.Builtin */
[data-theme="dark"] .syntax-coloring .nc { color: #A6E22E } /* Name.Class */
[data-theme="dark"] .syntax-coloring .no { color: #66D9EF } /* Name.Constant */
[data-theme="dark"] .syntax-coloring .nd { color: #A6E22E } /* Name.Decorator */
[data-theme="dark"] .syntax-coloring .ni { color: #F8F8F2 } /* Name.Entity */
[data-theme="dark"] .syntax-coloring .ne { color: #A6E22E } /* Name.Exception */
[data-theme="dark"] .syntax-coloring .nf { color: #A6E22E } /* Name.Function */
[data-theme="dark"] .syntax-coloring .nl { color: #F8F8F2 } /* Name.Label */
[data-theme="dark"] .syntax-coloring .nn { color: #F8F8F2 } /* Name.Namespace */
[data-theme="dark"] .syntax-coloring .nx { color: #A6E22E } /* Name.Other */
[data-theme="dark"] .syntax-coloring .py { color: #F8F8F2 } /* Name.Property */
[data-theme="dark"] .syntax-coloring .nt { color: #FF4689 } /* Name.Tag */
[data-theme="dark"] .syntax-coloring .nv { color: #F8F8F2 } /* Name.Variable */
[data-theme="dark"] .syntax-coloring .ow { color: #FF4689 } /* Operator.Word */
[data-theme="dark"] .syntax-coloring .pm { color: #F8F8F2 } /* Punctuation.Marker */
[data-theme="dark"] .syntax-coloring .w { color: #F8F8F2 } /* Text.Whitespace */
[data-theme="dark"] .syntax-coloring .mb { color: #AE81FF } /* Literal.Number.Bin */
[data-theme="dark"] .syntax-coloring .mf { color: #AE81FF } /* Literal.Number.Float */
[data-theme="dark"] .syntax-coloring .mh { color: #AE81FF } /* Literal.Number.Hex */
[data-theme="dark"] .syntax-coloring .mi { color: #AE81FF } /* Literal.Number.Integer */
[data-theme="dark"] .syntax-coloring .mo { color: #AE81FF } /* Literal.Number.Oct */
[data-theme="dark"] .syntax-coloring .sa { color: #E6DB74 } /* Literal.String.Affix */
[data-theme="dark"] .syntax-coloring .sb { color: #E6DB74 } /* Literal.String.Backtick */
[data-theme="dark"] .syntax-coloring .sc { color: #E6DB74 } /* Literal.String.Char */
[data-theme="dark"] .syntax-coloring .dl { color: #E6DB74 } /* Literal.String.Delimiter */
[data-theme="dark"] .syntax-coloring .sd { color: #E6DB74 } /* Literal.String.Doc */
[data-theme="dark"] .syntax-coloring .s2 { color: #E6DB74 } /* Literal.String.Double */
[data-theme="dark"] .syntax-coloring .se { color: #AE81FF } /* Literal.String.Escape */
[data-theme="dark"] .syntax-coloring .sh { color: #E6DB74 } /* Literal.String.Heredoc */
[data-theme="dark"] .syntax-coloring .si { color: #E6DB74 } /* Literal.String.Interpol */
[data-theme="dark"] .syntax-coloring .sx { color: #E6DB74 } /* Literal.String.Other */
[data-theme="dark"] .syntax-coloring .sr { color: #E6DB74 } /* Literal.String.Regex */
[data-theme="dark"] .syntax-coloring .s1 { color: #E6DB74 } /* Literal.String.Single */
[data-theme="dark"] .syntax-coloring .ss { color: #E6DB74 } /* Literal.String.Symbol */
[data-theme="dark"] .syntax-coloring .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
[data-theme="dark"] .syntax-coloring .fm { color: #A6E22E } /* Name.Function.Magic */
[data-theme="dark"] .syntax-coloring .vc { color: #F8F8F2 } /* Name.Variable.Class */
[data-theme="dark"] .syntax-coloring .vg { color: #F8F8F2 } /* Name.Variable.Global */
[data-theme="dark"] .syntax-coloring .vi { color: #F8F8F2 } /* Name.Variable.Instance */
[data-theme="dark"] .syntax-coloring .vm { color: #F8F8F2 } /* Name.Variable.Magic */
[data-theme="dark"] .syntax-coloring .il { color: #AE81FF } /* Literal.Number.Integer.Long */

input[type='radio'] {
    /* I wanted to style the whole of the radio button in a non-navy color (something that fits more with what we
    do generally but I didn't manage to get it done in the self-allotted time. I'm still seeing a navy outer ring */
    color: rgb(6 182 212);  /* cyan-500 */
}
