/*
Styles in this section apply both to the sphinx-built website docs and to notebooks
rendered in an IDE or in Jupyter. In our web docs, styles here are complemented by
doc/_static/styles.css and other CSS files (e.g. from the sphinx theme, sphinx-gallery,
or bootstrap). In IDEs/Jupyter, those style files are unavailable, so only the rules in
this file apply (plus whatever default styling the IDE applies).
*/
.mne-repr-table {
    display: inline;  /* prevent using full container width */
}
.mne-repr-table tr.mne-repr-section-header > th {
    padding-top: 1rem;
    text-align: left;
    vertical-align: middle;
}
.mne-repr-section-toggle > button {
    all: unset;
    display: block;
    height: 1rem;
    width: 1rem;
}
.mne-repr-section-toggle > button > svg {
    height: 60%;
}

/* transition (rotation) effects on the collapser button */
.mne-repr-section-toggle > button.collapsed > svg {
    transition: 0.1s ease-out;
    transform: rotate(-90deg);
}
.mne-repr-section-toggle > button:not(.collapsed) > svg {
    transition: 0.1s ease-out;
    transform: rotate(0deg);
}

/* hide collapsed table rows */
.mne-repr-collapsed {
    display: none;
}


@layer {
    /*
    Selectors in a `@layer` will always be lower-precedence than selectors outside the
    layer. So even though e.g. `div.output_html` is present in the sphinx-rendered
    website docs, the styles here won't take effect there as long as some other rule
    somewhere in the page's CSS targets the same element.

    In IDEs or Jupyter notebooks, though, the CSS files from the sphinx theme,
    sphinx-gallery, and bootstrap are unavailable, so these styles will apply.

    Notes:

    - the selector `.accordion-body` is for MNE Reports
    - the selector `.output_html` is for VSCode's notebook interface
    - the selector `.jp-RenderedHTML` is for Jupyter notebook
    - variables starting with `--theme-` are VSCode-specific.
    - variables starting with `--jp-` are Jupyter styles, *some of which* are also
      available in VSCode. Here we try the `--theme-` variable first, then fall back to
      the `--jp-` ones.
    */
    .mne-repr-table {
        --mne-toggle-color: var(--theme-foreground, var(--jp-ui-font-color1));
        --mne-button-bg-color: var(--theme-button-background, var(--jp-info-color0, var(--jp-content-link-color)));
        --mne-button-fg-color: var(--theme-button-foreground, var(--jp-ui-inverse-font-color0, var(--jp-editor-background)));
        --mne-button-hover-bg-color: var(--theme-button-hover-background, var(--jp-info-color1));
        --mne-button-radius: var(--jp-border-radius, 0.25rem);
    }
    /* chevron position/alignment; in VSCode it looks ok without adjusting */
    .accordion-body .mne-repr-section-toggle > button,
    .jp-RenderedHTML .mne-repr-section-toggle > button {
        padding: 0 0 45% 25% !important;
    }
    /* chevron color; MNE Report doesn't have light/dark mode */
    div.output_html .mne-repr-section-toggle > button > svg > path,
    .jp-RenderedHTML .mne-repr-section-toggle > button > svg > path {
        fill: var(--mne-toggle-color);
    }
    .accordion-body .mne-ch-names-btn,
    div.output_html .mne-ch-names-btn,
    .jp-RenderedHTML .mne-ch-names-btn {
        -webkit-border-radius: var(--mne-button-radius);
        -moz-border-radius: var(--mne-button-radius);
        border-radius: var(--mne-button-radius);
        border: none;
        background-image: none;
        background-color: var(--mne-button-bg-color);
        color: var(--mne-button-fg-color);
        font-size: inherit;
        min-width: 1.5rem;
        padding: 0.25rem;
        text-align: center;
        text-decoration: none;
    }
    .accordion-body .mne-ch-names-btn:hover,
    div.output_html .mne.ch-names-btn:hover,
    .jp-RenderedHTML .mne-ch-names-btn:hover {
        background-color: var(--mne-button-hover-bg-color);
        text-decoration: underline;
    }
    .accordion-body .mne-ch-names-btn:focus-visible,
    div.output_html .mne-ch-names-btn:focus-visible,
    .jp-RenderedHTML .mne-ch-names-btn:focus-visible {
        outline: 0.1875rem solid var(--mne-button-bg-color) !important;
        outline-offset: 0.1875rem !important;
    }
}