.expand-collapse .ec-header {
    cursor: pointer;
    flex-grow: 2;
}

.expand-collapse .ec-header a {
    background-image: url("");
    background-position: center right;
    background-position-y: 0.125em;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    padding-right: 2em;
    text-decoration: none;
}

.expand-collapse .ec-header:hover a {
    text-decoration: underline;
}

.expand-collapse.collapsed .ec-header a {
    background-image: url("");
}

.expand-collapse.collapsed .ec-body {
    display: none;
}

.expand-all {
    font-size: 0.625em;
}

usos-frame > [slot="trailing-content"].expand-all {
    background: var(--background);
    color: var(--primary);
    border-radius: 2px;
    font-size: 100%;
    margin-left: auto;
    padding: 0 1rem;
    font-weight: 600;
}

usos-frame > [slot="trailing-content"].expand-all:focus { outline-color: var(--background); }
usos-frame > [slot="trailing-content"].expand-all:focus-visible { outline-color: var(--background); }

usos-frame > [slot="trailing-content"].expand-all a, usos-frame > [slot="title"] .ec-header > a {
    text-decoration: none;
}

usos-frame > [slot="trailing-content"].expand-all:hover, usos-frame > [slot="title"] .ec-header > a:hover,
usos-frame > [slot="trailing-content"].expand-all:focus, usos-frame > [slot="title"] .ec-header > a:focus {
    text-decoration: underline;
}

/* TODO zmienić na maskę
.frame.expand-collapse.collapsed > div:first-child .ec-header > a {
    background-image: url(../img/link/arrow/expand_more_white.svg) ;
}

.frame.expand-collapse > div:first-child .ec-header > a {
    background-image: url(../img/link/arrow/expand_less_white.svg) ;
}*/