/*accordion*/
.accordion
{
    display: flex;
    flex-direction: column;
}
.accordion label.accordion-title-row
{
    display:flex;
    flex-direction:row;
    gap:var(--vel-layout-spacing-01);
    cursor:pointer;
    align-items:center;
    flex:0 0 auto;
    padding-inline: var(--vel-fixed-spacing-02);
}
.accordion label.accordion-title-row .accordion-title
{
    display:flex;
    flex-direction:row;
    gap: var(--vel-layout-spacing-01);
    flex:1 1 auto;
    align-items: center;
}
.accordion label.accordion-title-row:hover
{
    border-radius:var(--vel-fixed-spacing-02);
    background-color: var(--vel-color-neutral-100);
}

.accordion label.accordion-title-row .accordion-icon
{
    width:1em;
    display:flex;
    flex:0 0 auto;
}
.accordion input[type=checkbox].accordion-expanded:checked ~ label.accordion-title-row .accordion-icon
{
    transform: rotateX(180deg);
}
.accordion.dropdown
{
    position:relative;
}
.accordion .accordion-content
{
    display:none;
}
.accordion.dropdown .accordion-content
{
    position:absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index:1;
}

.accordion input[type=checkbox].accordion-expanded
{
    display:none;
    width:0px;
    height: 0px;
    visibility: hidden;
}
.accordion input[type=checkbox].accordion-expanded:checked ~ .accordion-content
{
    display:block;
}
.accordion.dropdown .accordion-title-row::after
{
    position:fixed;
    content:'';
    display:none;
    left:0;top:0;right:0;bottom:0;
    opacity:.1;
    background-color:silver;
    z-index:1;
}
.accordion.dropdown input[type=checkbox].accordion-expanded:checked ~ .accordion-title-row::after
{
    display:block;
}