.nav-rail{align-items:center;background:var(--md-sys-color-surface2);border-radius:8px;display:flex;flex-direction:column;flex-shrink:0;gap:16px;height:100%;margin-right:16px;padding:16px 0;width:100px;z-index:20}@media (max-width:576px){.nav-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,80px));height:auto;justify-content:space-between;margin:16px 0;padding:24px 8px;width:100%}}.nav-rail__button{color:var(--md-sys-color-on-surface);flex-direction:column;gap:8px;z-index:30}.nav-rail__button,.nav-rail__button-icon{align-items:center;display:flex;justify-content:center}.nav-rail__button-icon{border-radius:16px;color:var(--md-sys-color-on-secondary-container);height:32px;transition:background-color .2s;width:56px}.nav-rail__button--active .nav-rail__button-icon{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-surface-variant);transition:background-color .2s}.nav-rail__button:hover .nav-rail__button-icon{background:var(--md-sys-color-surface-variant);transition:background-color .2s}