.toggle-btns { position: sticky; } button.toggle.open:not(.see-more) { font-weight: bold; } #tabs button.toggle { transition: margin 0.4s var(--curve-sine); } #tabs.minimized button.toggle.left { margin-left: calc(-4px - var(--width)); } button.toggle.left::after { margin-left: var(--unit--horizontal); } button.toggle.left.close::after { content: "+"; } button.toggle.left.open::after { content: "-"; } #tabs.minimized button.toggle.right { margin-right: calc(-4px - var(--width)); } button.toggle.right::before { margin-right: var(--unit--horizontal); } button.toggle.right.close::before { content: "+"; } button.toggle.right.open::before { content: "-"; } #tabs { width: 100%; z-index: 1; position: sticky; top: calc(var(--unit--vertical) * 8); transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4)); } .active-tab { position: absolute; max-height: calc(var(--unit--vertical-relative) * 17); overflow: auto; transition: max-height 0.5s ease-in-out; padding: var(--unit--vertical) 0; } /* ================= SCROLLBAR ================= */ /* Works on Firefox */ .active-tab { scrollbar-width: thin; scrollbar-color: #fff transparent; } /* Works on Chrome, Edge, and Safari */ .active-tab::-webkit-scrollbar { width: 3px; height: auto; } .active-tab::-webkit-scrollbar-track { background: transparent; } .active-tab::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 1px; border: none; } .texts__year.short .year__edito { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .texts__year .see-more { width: 100%; margin-top: calc(var(--unit--vertical) / 2); } @media screen and (min-width: 640px) { #home #tabs { margin-top: calc(0px - (10 * var(--unit--vertical))); } button.toggle.left::after { margin-left: calc(var(--unit--horizontal) / 2); } button.toggle.right::before { margin-right: calc(var(--unit--horizontal) / 2); } }