/* Maxon Sphinx Theme

This is the new CSS for a custom Maxon Sphinx theme, substantially cutting down on the size of the 
old theme (1600+ lines with much less features). The rules for this file are:

- Avoid adding things to this file, instead create a new CSS file in docs/_static/css/ (it will be
  automatically included in the layout.html). Only things that are truly fundamental to the theme 
  should go here (and and it is probably very rare that you find something that should go here).
- Use variables and reuse values where possible. The old file was such a spaghetti mess. Never hard
  code colors, sizes, paddings, margins, ...

Editing this file to 'tune' the theme is fine but should also be done in a manner that puts file
length over everything. FIND THE RIGHT PLACE for your edit and add comments to explain what you are
doing. Otherwise we end up again with dozens selectors for <p> scattered all over the file.

Author: Ferdinand Hoppe
Date: 15/10/2025
*/

/* The fonts we use be VERY conservative with adding new fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap');

/* --- CSS Variables -----------------------------------------------------------------------------*/

/* Light mode and default values */
:root {
    --brd-navbar-bottom: 1px solid hsla(0, 0%, 0%, 10%);
    --brd-note-note: 4px solid hsl(210, 50%, 75%);
    --brd-note-see: 4px solid hsl(40, 50%, 75%);
    --brd-note-warning: 4px solid hsl(0, 50%, 75%);
    --brd-radius-normal: 0.375rem;
    --brd-radius-small: 0.25rem;
    --brd-solid-1px-light: 1px solid hsla(0, 0%, 0%, 5%);
    --brd-solid-1px-dark: 1px solid hsla(0, 0%, 0%, 10%);
    --brd-solid-1px-dark-hover: 1px solid hsla(0, 0%, 0%, 15%);
    --brd-solid-1px-normal: 1px solid hsla(0, 0%, 0%, 10%);
    --col-bg-code: hsl(210, 0%, 95%);
    --col-bg-control: hsla(0, 0%, 0%, 7%);
    --col-bg-control-hover: hsla(0, 0%, 0%, 5%);
    --col-bg-navbar: hsl(0, 0%, 95%);
    --col-bg-modal-overlay: hsla(0, 0%, 100%, 90%);
    --col-bg: hsl(0, 0%, 99%);
    --col-fg-accent-lighter: hsla(220, 58%, 60%);
    --col-fg-accent-light: hsla(220, 58%, 50%);
    --col-fg-accent-tint: hsla(220, 58%, 45%, 50%);
    --col-fg-accent-tint-light: hsla(220, 58%, 45%, 10%);
    --col-fg-accent: hsl(220, 58%, 45%);
    --col-fg-banner: hsl(0, 0%, 100%);
    --col-fg-control-hover: hsla(0, 0%, 0%, 2%);
    --col-fg-dark: hsl(0, 0%, 60%);
    --col-fg-darker: hsl(0, 0%, 40%);
    --col-fg-light: hsl(0, 0%, 95%);
    --col-fg-lighter: hsl(0, 0%, 99%);
    --col-fg-link: hsl(220, 58%, 45%);
    --col-fg-text-accent: hsl(220, 58%, 45%);
    --col-fg-text-control-hover: hsla(0, 0%, 0%, 80%);
    --col-fg-text: hsl(0, 0%, 30%);
    --col-fg-text-light: hsl(0, 0%, 40%);
    --col-fg-text-lighter: hsl(0, 0%, 60%);
    --col-fg-text-lightest: hsl(0, 0%, 70%);
    --col-fg: hsl(0, 0%, 80%);
    --col-tint-light: hsla(0, 0%, 0%, 3%);
    --col-tint-lighter: hsla(0, 0%, 0%, 1.5%);
    --col-tint-normal: hsla(0, 0%, 0%, 5%);
    --fnt-family-roboto-mono: 'Roboto Mono', 'Courier New', Courier, monospace;
    --fnt-family-roboto: 'Roboto', Arial, Helvetica, sans-serif;
    --fnt-size-code: 90%;
    --fnt-size-code-title: 0.95rem;
    --fnt-size-large: 1.5rem;
    --fnt-size-larger: 2rem;
    --fnt-size-largest: 3rem;
    --fnt-size-medium: 1.25rem;
    --fnt-size-normal: 1rem;
    --fnt-size-small: 0.95rem;
    --fnt-size-smaller: 0.875rem;
    --fnt-weight-heavy: 600;
    --fnt-weight-light: 300;
    --fnt-weight-medium: 500;
    --fnt-weight-normal: 400;
    --shd-normal: 0px 1px 2px hsla(0, 0%, 0%, 10%);
    --shd-image: 6px 6px 18px hsla(0, 0%, 0%, 20%);
    --shd-text-soft: 1px 1px 10px hsla(0, 0%, 0%, 50%);
    --spc-large: 30px;
    --spc-larger: 50px;
    --spc-medium: 20px;
    --spc-normal: 15px;
    --spc-small: 10px;
    --spc-smaller: 5px;
    --spc-smallest: 3px;
    --sze-content-min-height: calc((100vh - var(--sze-navbar-height) - var(--spc-larger) - 
                                    var(--spc-normal)));
    --sze-content-width: 1200px;
    --sze-footer-height: 40px;
    --sze-navbar-height: 50px;
    --sze-navbar-right-max-width: 400px;
    --sze-navbar-right-­­­­­min-width: 200px;
    --sze-navbar-right-desired-width: 250px;
    --sze-banner-height: 250px;
    --sze-scrollbar-width: 10px;
    --sze-scroll-offset: 80px;
    --sze-modal-blur: 5px;
}

/* Dark mode overrides */
body[data-bs-theme="dark"] {
    --brd-navbar-bottom: 1px solid hsla(0, 0%, 100%, 5%);
    --brd-note-note: 4px solid hsl(210, 50%, 55%);
    --brd-note-see: 4px solid hsl(40, 50%, 55%);
    --brd-note-warning: 4px solid hsl(0, 50%, 55%);
    --brd-solid-1px-light: 1px solid hsla(0, 0%, 100%, 5%);
    --brd-solid-1px-dark: 1px solid hsla(0, 0%, 100%, 15%);
    --brd-solid-1px-dark-hover: 1px solid hsla(0, 0%, 100%, 20%);
    --brd-solid-1px-normal: 1px solid hsla(0, 0%, 100%, 10%);
    --col-bg-code: hsl(0, 0%, 10%);
    --col-bg-control: hsla(0, 0%, 100%, 5%);
    --col-bg-control-hover: hsla(0, 0%, 100%, 20%);
    --col-bg-navbar: hsl(0, 0%, 10%);
    --col-bg: hsl(0, 0%, 12%);
    --col-bg-modal-overlay: hsla(0, 0%, 0%, 80%);
    --col-fg-accent-lighter: hsla(240, 50%, 70%);
    --col-fg-accent-light: hsla(240, 50%, 60%);
    --col-fg-accent-tint: hsla(240, 50%, 65%, 50%);
    --col-fg-accent-tint-light: hsla(240, 50%, 65%, 20%);
    --col-fg-accent: hsl(240, 50%, 65%);
    --col-fg-dark: hsl(0 0% 30%);
    --col-fg-darker: hsl(0, 0%, 20%);
    --col-fg-light: hsl(0, 0%, 20%);
    --col-fg-lighter: hsl(0, 0%, 14%);
    --col-fg-link: hsl(240, 50%, 65%);
    --col-fg-text-accent: hsl(240, 50%, 65%);
    --col-fg-text-control-hover: hsla(0, 0%, 100%, 50%);
    --col-fg-text-light: hsl(0, 0%, 60%);
    --col-fg-text-lighter: hsl(0, 0%, 40%);
    --col-fg-text-lightest: hsl(0, 0%, 30%);
    --col-fg-text-control-hover: hsla(0, 0%, 100%, 80%);
    --col-fg: hsl(0, 0%, 40%);
    --col-fg-text: hsl(0, 0%, 70%);
    --col-tint-light: hsla(0, 0%, 100%, 5%);
    --col-tint-lighter: hsla(0, 0%, 100%, 2.5%);
    --shd-normal: 0px 1px 2px hsla(0, 0%, 0%, 40%);
}

/* The index page is different than all other pages due to the banner which messes both with 
   the page height and color perception */
.mxn-index {
    --sze-content-min-height: calc((100vh - var(--sze-navbar-height) - var(--spc-larger) - 
                                    var(--spc-normal) - var(--sze-banner-height)));
}
                                
body[data-bs-theme="light"] .mxn-index {
    --col-bg-navbar: hsl(0, 0%, 90%);
    --brd-navbar-bottom: 1px solid hsla(0, 0%, 0%, 30%);
}

/* --- Fundamentals ------------------------------------------------------------------------------*/

html {
    height: 100vh;
}

body {
    background-color: var(--col-bg);
    color: var(--col-fg-text);
    font-family: var(--fnt-family-roboto);
    font-size: var(--fnt-size-normal);
    height: 100%;
}

*:focus {
  outline: none; /* disable the aggressive focus rings */
}

/* --- Layout ------------------------------------------------------------------------------------*/

section {
    position: relative; 
}

/* holds an entire page */
.mxn-page {
    background-color: var(--col-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

/* the top navbar */
.mxn-navbar {
    align-items: center;
    background-color: var(--col-bg-navbar);
    border-bottom: var(--brd-navbar-bottom);
    display: flex;
    flex-shrink: 0;
    height: var(--sze-navbar-height);
    justify-content: space-between;
    padding: 0 var(--spc-medium);
    width: 100%;
}

.mxn-navbar .mxn-logo {
    height: 32px;
    width: auto;
    display: flex;
    align-items: center;
    margin-right: var(--spc-normal);
}

.mxn-navbar-right {
    align-items: center;
    display: flex;
    margin-left: auto;
}

.mxn-navbar-right .search-group {
    max-width: var(--sze-navbar-right-max-width);
    min-width: var(--sze-navbar-right-min-width);
    width: var(--sze-navbar-right-desired-width);
}

.mxn-navbar-right .search-group .mxn-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: var(--spc-small);
    width: -webkit-fill-available;
}

/* holds everything below the navbar */
.mxn-content {
    display: flex;
    flex: 1;
    margin-bottom: var(--spc-normal);
    min-height: 0;
}

/* special layout for pages which do not have a sidebar */
.mxn-content.mxn-no-sidebar {
    flex-direction: column;
    align-items: center;
}

/* hide the main title on the index page, as we have a banner */
.mxn-index .mxn-content h1:first-of-type {
    display: none;
}

/* the left sidebar */
.mxn-sidebar {
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 0 var(--spc-large);
    width: calc(50vw - (var(--sze-content-width) * 0.5) - (var(--spc-large) * 2));
}

/* the scrollable area */
.mxn-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

/* the banner shown on the landing page */
.mxn-banner {
    position: relative; /* Make this the positioning context */
    width: 100%;
    height: var(--sze-banner-height);
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

.mxn-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mxn-banner .mxn-heading,
.mxn-banner .mxn-credit {
    position: absolute;
    line-height: 100%;
    z-index: 1;
    margin: 0;
    font-family: var(--fnt-family-roboto);
    margin: 0 var(--spc-large);
}

.mxn-banner .mxn-heading {
    color: var(--col-fg-banner);
    font-size: var(--fnt-size-largest);
    font-weight: var(--fnt-weight-heavy);
    text-shadow: var(--shd-text-soft);
    top: calc(50% - var(--fnt-size-large));
}

.mxn-banner .mxn-credit {
    background-color: black;
    border-radius: var(--brd-radius-normal);
    bottom: var(--spc-smaller);
    color: var(--col-fg-banner);
    font-size: var(--fnt-size-smaller);
    font-weight: var(--fnt-weight-normal);
    left: auto;
    padding: var(--spc-smaller) var(--spc-small);
    right: var(--spc-smaller);
    opacity: 0.45;
}

/* renders the main content */
.mxn-body {
    max-width: var(--sze-content-width);
    min-height: var(--sze-content-min-height);
    margin-top: var(--spc-larger);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mxn-content.mxn-no-sidebar .mxn-body {
    margin-left: auto;
    margin-right: auto;
}

/* the footer, part of mxn-scroll */
.mxn-footer {
    align-content: center;
    height: var(--sze-footer-height);
    width: 100%;
    margin-top: var(--spc-normal);
}

/* Give up sidebar on small screens 
 TODO (Ferdinand): Make this a flyout on mobile */
@media (max-width: 1600px) {
    .mxn-sidebar { 
        display: none;
    }

    .mxn-body {
        margin-left: auto;
        margin-right: auto;
        padding: 0 var(--spc-large);
    }
}

/* the footer content */

.mxn-footer .footer-center {
    display: flex;
    justify-content: center;
    font-size: var(--fnt-size-smaller);
}

.mxn-footer a,
.mxn-footer div {
    color: var(--col-fg-text-lightest) !important;
}

.mxn-footer .footer-text::after {
    content: "|";
    margin-left: var(--spc-normal);
    margin-right: var(--spc-normal);
}

.mxn-footer .footer-text:last-child::after {
    content: "";
    margin: 0;
}

/* can be injected next not mxn-page to open 'modal' overlays */
.mxn-disabled-blur {
  filter: blur(var(--sze-modal-blur)) !important;
  pointer-events: none !important;
}

/* used to dsiable logo images in dark/light mode */
.mxn-light-theme-only {
    display: block;
}

body[data-bs-theme="dark"] .mxn-light-theme-only {
    display: none;
}

.mxn-dark-theme-only {
    display: none;
}

body[data-bs-theme="dark"] .mxn-dark-theme-only {
    display: block;
}

/* --- Scrollbar Styles --------------------------------------------------------------------------*/

::-webkit-scrollbar {
    background: var(--col-bg); 
    width: var(--sze-scrollbar-width);
}

::-webkit-scrollbar-thumb {
    background: var(--col-fg);
    border-radius: var(--brd-radius-normal);
}

::-webkit-scrollbar-track {
    background: var(--col-bg); 
}

::-webkit-scrollbar-button {
    display: none; 
}

/* --- Headings ----------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, .rubric, .py dt.field-even, .py dt.field-odd {
    border-bottom: var(--brd-solid-1px-normal);
    color: var(--col-fg-text);
    font-weight: var(--fnt-weight-normal);
    margin-bottom: var(--spc-medium);
    margin-top: var(--spc-large);
    padding-bottom: var(--spc-small);
}

/* The headings within the content area: Args, Returns, Raises, Example, ... */
dt.field-even, dt.field-odd {
    font-weight: var(--fnt-weight-medium) !important;
    margin: var(--spc-medium) 0  var(--spc-normal) 0;
    padding-bottom: var(--spc-smaller);
}

h1 {
    margin-top:  var(--spc-larger);
}

.mxn-inner-body section:first-child h1 {
    margin-top: 0;
}

h1 {
    font-size: var(--fnt-size-larger);
}

h2 {
    font-size: var(--fnt-size-large);
}

h3, h4, h5, h6 {
    color: var(--col-fg-text-light);
    font-size: var(--fnt-size-medium);
}

/* Sphinx hidden anchor links */

.headerlink {
    display: none;
    margin: 0 5px;
}

h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink,
h5:hover .headerlink, h6:hover .headerlink, dt:hover .headerlink {
    color: var(--col-fg-text-light);
    display: inline;
}

/* --- Text and Links ----------------------------------------------------------------------------*/

p {
    color: var(--col-fg-text);
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}

li {
    margin: var(--spc-small) 0;
}

li p {
    margin: 0; 
}

a {
    color: var(--col-fg-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b, strong {
    font-weight: var(--fnt-weight-medium);
}

/* Code emphasis and citations */

code {
    color: var(--col-fg-text-dark);
    font-size: var(--fnt-size-code);
    font-family: var(--fnt-family-roboto-mono);
    padding: 0 var(--spc-smaller);
}

cite, :not(ul.simple) td:not(:first-child) .docutils.literal { /* inline code */
    background-color: var(--col-tint-light);
    border-radius: var(--brd-radius-normal);
    font-family: var(--fnt-family-roboto-mono);
    font-size: var(--fnt-size-code);
    font-style: normal;
    padding: 1px 6px; /* can be hardcoded, super fringe */
}

/* Code blocks */
.highlight {
    border-radius: var(--brd-radius-normal);
    background-color: var(--col-bg-code);
    margin: var(--spc-large) 0;
    padding: var(--spc-medium) var(--spc-larger);
    box-shadow: var(--shd-normal);
}

.highlight pre {
    white-space: pre-wrap; 
    word-wrap: break-word;
}

.highlight .linenos {
    margin-right: var(--spc-large);
    opacity: 0.25;
}

/* --- Forms and Controls -----------------------------------------------------------------------*/

/* Bring Bootstrap form controls in line with our theme */
.form-control {
    transition: none !important;
    line-height: 1.0;
}

.form-check-input:checked {
    background-color: var(--col-fg-accent-light);
    border-color: var(--col-fg-accent-light);
}

.form-control:focus {
    border-color: var(--col-fg-accent-tint);
    box-shadow: none;
}

.form-check-input:focus{
    border-color: var(--col-fg-accent);
    box-shadow: 0 0 0 0.25rem hsl(245, 50%, 55%, 0.25);
}

.btn {
    transition: none !important;
}

.btn:hover {
    background-color: var(--col-bg-control-hover) !important;
    color: initial;
}

.btn:active {
    background-color: var(--col-bg-control-hover) !important;
    color: initial !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover {
    border-color: var(--bs-border-color);
}

/* Copy button for code blocks */
.highlight .copybtn {
    background-color: transparent !important;
    border: none !important;
    color: var(--col-fg-text-light);
    top: var(--spc-normal);
    right: var(--spc-normal);
}

.highlight .copybtn:hover {
    background-color: transparent !important;
}

.o-tooltip--left:hover:after {
    display: none !important;
}


/* Theme toggle button */
#theme-toggle {
    background-color: transparent;
    color: var(--col-fg-text-light);
    margin-left: var(--spc-small);
}

#theme-toggle:hover {
    color: var(--col-fg-text-control-hover);
    cursor: pointer;
}

/* A multipurpose button */
.mxn-button {
    border-radius: var(--brd-radius-normal);
    background-color: var(--col-fg-control-hover);
    color: var(--col-fg-text);
    padding: var(--spc-smaller);
    margin: 0 var(--spc-smallest);
    border: none;
}

.mxn-button:hover {
    background-color: var(--col-bg-control-hover);
    color: var(--col-fg-text-control-hover);
    cursor: pointer;
}

/* A button that is less in your face used for minor features */
.mxn-subtle-button {
    border-radius: var(--brd-radius-normal);
    background-color: transparent;
    color: var(--col-fg-dark);
    padding: var(--spc-smaller);
    margin: 0 var(--spc-smallest);
    border: none;
}

.mxn-subtle-button:hover {
    background-color: var(--col-bg-control-hover);
    color: var(--col-fg-text-control-hover);
    cursor: pointer;
}

/* --- Notes and Warnings ------------------------------------------------------------------------*/

.admonition {
    background-color: var(--col-tint-lighter);
    border-radius: 0 var(--brd-radius-normal) var(--brd-radius-normal) 0;
    margin: var(--spc-medium) 0;
    padding: var(--spc-normal) var(--spc-large);
}

.admonition-title { /* we disable 'Note', 'Warning', ... title */
    display: none;
}

.admonition > :last-child {
    margin-bottom: 0;
}

.seealso {
    border-left: var(--brd-note-see);
}

.warning {
    border-left: var(--brd-note-warning);
}

.note {
    border-left: var(--brd-note-note);
}

/* --- Tables ------------------------------------------------------------------------------------*/

table.docutils {
    border: 0;
    margin-bottom: var(--spc-medium);
    margin-top: var(--spc-medium);
}

table.docutils tr:has(> th){
    border-bottom: var(--brd-solid-1px-normal);
}

table.docutils th {
    font-weight: var(--fnt-weight-normal);
    padding: var(--spc-smaller) var(--spc-small);
    padding-bottom: var(--spc-small);
}

table.docutils th p {
    color: var(--col-fg-text-light);
}


table.docutils td {
    vertical-align: top;
    padding: var(--spc-smaller) var(--spc-small);
}

table.docutils tbody > tr:first-child > td {
    padding-top: var(--spc-normal);
}

table.docutils p {
    margin: 0
}

/* --- Python Entities ---------------------------------------------------------------------------*/

/* The container that wraps the entire definition, e.g. a class or function */
.class, .classmethod, .data, .staticmethod, .method, .function, .attribute {
    background-color: var(--col-fg-lighter);
    border-radius: var(--brd-radius-normal);
    border: var(--brd-solid-1px-normal);
    box-shadow: var(--shd-normal);
    margin: 40px 0;
}

/* The title bar at the top of the container */
.class .sig, .classmethod .sig, .data .sig, .staticmethod .sig, .method .sig, .function .sig, 
.attribute .sig {
    background-color: var(--col-fg-light);
    border-radius: var(--brd-radius-normal) var(--brd-radius-normal) 0 0;
    color: var(--col-fg-text-light);
    font-family: var(--fnt-family-roboto-mono);
    font-size: var(--fnt-size-code-title);
    font-weight: var(--fnt-weight-normal);
    padding: var(--spc-normal) var(--spc-medium) var(--spc-normal) var(--spc-medium);
}

/* Style the typography of the signature in the title bar */
.py dt>.property,
.py dt>code.sig-prename.descclassname,
.py dt>code.sig-name.descname {
    color: var(--col-fg-text);
    font-weight: var(--fnt-weight-normal);
}

.py .sig-name.descname {
    color : var(--col-fg-text);
    font-weight: var(--fnt-weight-medium);
}

.class em, .method em, .staticmethod em, .classmethod em, .function em, .class cite, .method cite, 
.staticmethod cite, .classmethod cite, .function cite {
    font-family: var(--fnt-family-roboto-mono);
    font-style: normal;
}

/* The content area below the title bar */
.class>dd, .classmethod>dd, .data>dd, .staticmethod>dd, .method>dd, .function>dd, .attribute>dd {
    border-radius: 0 0 var(--brd-radius-normal) var(--brd-radius-normal);
    display: block;
    padding: var(--spc-normal) var(--spc-medium) var(--spc-normal) var(--spc-medium);
}

/* Argument lists */
.field-list ul {
  line-height: 150%;
  list-style-type: square; 
}

.field-list li {
  margin-bottom: var(--spc-small);
}

.field-list li p {
  margin: 0;
}

/* Inline code */
.class em, .method em, .staticmethod em, .classmethod em, .function em, .class cite, .method cite, 
.staticmethod cite, .classmethod cite, .function cite {
    font-family: var(--fnt-family-roboto-mono);
    font-style: normal;
}

/* An embedded code block */
.class .highlight, .classmethod .highlight, .data .highlight, .staticmethod .highlight, 
.method .highlight, .function .highlight, .attribute .highlight {
    padding: var(--spc-normal);
    box-shadow: none;
    background-color: transparent;
    margin: 0;
}

/* --- Sphinx Figures ----------------------------------------------------------------------------*/

figure {
    text-align: center;
    margin: var(--spc-larger) 0;
}

figcaption {
    font-size: var(--fnt-size-smaller);
    margin: 0 var(--spc-medium) var(--spc-medium) var(--spc-medium);
}

figcaption p {
    text-align: center !important;
}

.figure {
    padding: 0;
    text-align: center;
    width: fit-content;
}

.figure img,
figure img {
    height: auto !important;
    margin-bottom: var(--spc-medium);
    max-width: 100% !important;
    width: auto !important;
}

img.mxn-no-margin {
    margin-bottom: 0 !important;
}

.caption {
    color: var(--col-fg-text-light);
    font-size: var(--fnt-size-smaller);
    margin-top: var(--spc-small);
    text-align: center !important;
}

/* --- Shortcut Icons --------------------------------------------------------------------------*/

.mxn-shortcut-icon {
    position: absolute;
    right: 8px;
    pointer-events: none;
    padding: 0 var(--spc-smaller);
    font-size: 80%;
    font-family: var(--fnt-family-roboto);
    background-color: transparent;
    border: var(--brd-solid-1px-normal);
    border-radius: var(--brd-radius-normal);
    color: var(--col-fg-tex);
}

.mxn-shortcut-icon.hidden {
    display: none;
}