.sidebar-footer-wrapper { box-sizing: border-box; width: 100%; position: sticky; bottom: 0; .sidebar-footer-container { display: flex; align-items: stretch; position: relative; border-top: 1.5px solid var(--primary-low); background: var(--primary-very-low); padding: 0.5em 0.8em; &:before { // fade to make scroll more apparent position: absolute; content: ""; display: block; height: 1.5em; top: calc(-1.5em - 1px); left: -0.5em; right: -0.5em; width: calc(100% + 0.5em); pointer-events: none; background: linear-gradient( to bottom, rgba(var(--primary-very-low-rgb), 0), rgba(var(--primary-very-low-rgb), 1) ); } } .sidebar-footer-link { display: inline-flex; align-items: center; height: 100%; font-size: var(--font-down-1); color: var(--primary-high); padding: 0 0.5em; &:hover, &:focus { background: var(--d-sidebar-highlight-color); } } .sidebar-footer-links-separator { color: var(--primary-low-mid); } .sidebar-footer-actions { margin-left: auto; } .sidebar-footer-actions-button.btn { background: transparent; border: none; padding: 0.25em 0.4em; .d-icon { font-size: var(--font-down-1); color: var(--primary-medium); } &:focus, &:hover { background: var(--d-sidebar-highlight-color); } } }