@charset "UTF-8";
/*
:filename: spparows.statics.panel.css
:author:   Brigitte Bigi
:contact:  develop@sppas.org
:summary:  Style to be used for SPPAS User Interface -- SPARROWS.

.. _This file is part of SPPAS: http://www.sppas.org/
..
    -------------------------------------------------------------------------

     ___   __    __    __    ___
    /     |  \  |  \  |  \  /              the automatic
    \__   |__/  |__/  |___| \__             annotation and
       \  |     |     |   |    \             analysis
    ___/  |     |     |   | ___/              of speech

    Copyright (C) 2011-2023 Brigitte Bigi
    Laboratoire Parole et Langage, Aix-en-Provence, France

    Use of this software is governed by the GNU Public License, version 3.

    SPPAS 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.

    SPPAS 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 SPPAS. If not, see <http://www.gnu.org/licenses/>.

    This banner notice must not be removed.

    -------------------------------------------------------------------------

https://webdesign.tutsplus.com/tutorials/how-to-code-an-accessible-javascript-accordion-component--cms-93450

*/


/* ============== A simple panel with scrollbar ================ */

.sp-scrolled-panel {
    border: 0;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: scroll;
}

.sp-scrolled-panel:after, .sp-scrolled-panel:before {
    content: "";
    display: table;
    clear: both
}

.sp-scrolled-panel[hidden] {
    display: none;
}

/* ========================= A collapsible panel ========================= */

section.rise {
    background-color: var(--panels-bg-color1);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

header.rise-header {
    background-color: var(--bg-color2);
    border-radius: calc(2 * var(--focus-border-width));
    display: flex;
    justify-content: flex-start;
    min-height: 1.8rem;
    padding: 0;
}

main.rise-main {
    border: calc(var(--focus-border-width) / 2) solid var(--bg-color2);
    border-radius: 0;
    transition: all 0.3s;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 0.5rem;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}
main.rise-main[hidden] {
    display: none;
}

/* ----- The trigger is an input of type checkbox with a label ----- */
.rise-input {
    display: none;
    opacity: 0;
    z-index: -1;
}

.rise input:checked + header .rise-label::before {
    transform: translateY(60%) rotate(90deg);
}

.rise input:checked ~ .rise-content {
  max-height: 100vh;
  padding: 1em;
}

.rise-label {
    border: var(--focus-border-width) solid transparent;
    border-radius: calc(2 * var(--focus-border-width));
    margin: 0;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding-left: 0.5rem;
    font-weight: bold;
    cursor: pointer;
}

.rise-label::before {
    content: "❯";
    width: 1.2rem;
    height: 1rem;
    text-align: center;
    transition: all 0.3s;
    padding-right: 1.5rem;
}

/*  ------- The trigger is a button (accessible solution) ------ */

header button.rise-trigger {
    flex: 1;
    border: var(--focus-border-width) solid transparent;
    border-radius: calc(2 * var(--focus-border-width));
    justify-content: flex-start;
    text-align: left;
    padding-left: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0.1rem;
}

header button.rise-trigger[aria-expanded="true"]::before {
    content: "-";
    width: 1.2rem;
    height: 1rem;
    text-align: center;
    transition: all 0.3s;
    padding-right: 1rem;
}

header button.rise-trigger[aria-expanded="false"]::before {
    content: "+";
    width: 1.2rem;
    height: 1rem;
    text-align: center;
    transition: all 0.3s;
    padding-right: 1rem;
}

/* Any action button in the header */

header button.accordion-action, header a[role=button].accordion-action  {
    flex: 1;
    max-width: 2.5rem;
    border: var(--focus-border-width) solid transparent;
    border-radius: calc(2 * var(--focus-border-width));
    position: relative;
    margin: 0.1rem;
}

/* Like the main :hover */
header button.accordion-action:hover, header a[role=button].accordion-action:hover {
    border: var(--focus-border-width) dashed var(--focus-border-color);
    border-radius: calc(2 * var(--focus-border-width));
}