header{background:var(--background-1);flex:0 0 auto;flex-direction:column;gap:16px;height:100%;justify-content:space-between;padding:30px 25px;width:120px;z-index:10}header,header .logo{align-items:center;display:flex}header .logo{border-radius:var(--radius);color:var(--third);height:50px;justify-content:center;overflow:hidden;width:50px}header .logo img{height:100%;width:100%}header .logo svg{width:75%}header a,header button{align-items:center;border-radius:var(--radius);color:var(--text-disabled);display:flex;flex:0 0 auto;font-weight:400;height:60px;justify-content:center;position:relative;width:60px}header a:before,header button:before{background:transparent;border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;transition:inherit;width:100%}header a span:not(.day),header button span:not(.day){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgb(var(--background));background:var(--background-9);border-radius:var(--big-radius);color:var(--text);font-size:1rem;left:calc(-100% - 100vw);opacity:.1;padding:10px 15px;pointer-events:none;position:absolute;transition:transform var(--transition),opacity var(--transition);white-space:nowrap}header a .day,header button .day{font-family:monospace;font-size:.6rem;font-weight:600;left:50%;line-height:1;position:absolute;top:48%;transform:translate(-50%)}header a.current_day,header button.current_day{color:var(--third)}header a.current_day:before,header button.current_day:before{opacity:.1}header a.current_day:is(:hover,:focus-visible,.router-link-active),header button.current_day:is(:hover,:focus-visible,.router-link-active){color:var(--third)}header a.current_day:is(:hover,:focus-visible,.router-link-active):before,header button.current_day:is(:hover,:focus-visible,.router-link-active):before{background:var(--third)}header a svg,header button svg{width:33%}header a.add,header button.add{background:var(--primary)}header a:is(:hover,:focus-visible) span:not(.day),header button:is(:hover,:focus-visible) span:not(.day){left:calc(100% + 6px);opacity:1;transform:translate(10px)}header a:is(:hover,:focus-visible,.router-link-active),header button:is(:hover,:focus-visible,.router-link-active){color:var(--text)}header a:is(:hover,:focus-visible,.router-link-active):before,header button:is(:hover,:focus-visible,.router-link-active):before{background:var(--background-1)}header .account{display:flex;flex-direction:column;gap:8px}header .account .add_music{background:var(--primary);color:var(--invert)}header .account .add_music:is(:hover,:focus-visible){background:var(--primary-hover)}header .account .avatar{background:rgb(var(--background));border-radius:50%;height:60px;overflow:hidden;width:60px}header .account .avatar img{height:100%;margin-top:auto;-o-object-fit:contain;object-fit:contain;padding-top:8px;position:relative;width:100%;z-index:1}header .account .avatar:is(:hover,:focus-visible){background:var(--background-4)}header .account .name{color:var(--text-secondary);font-weight:600;text-align:center}header nav ul{display:flex;flex-direction:column;gap:16px}@media (max-width:767px){header{flex-direction:row;height:90px;justify-content:flex-end;padding:20px 32px;width:100%}header a,header button{height:50px;width:50px}header a span,header button span{display:none}header .account{order:-2}header .account .name{display:none}header nav ul{flex-direction:row-reverse}header .btn_logout{margin-right:auto;order:-1}}@media (max-width:575px){header{gap:8px;height:72px;padding:16px}header a,header button{height:40px;width:40px}header a svg,header button svg{width:40%}header .account{display:none}header nav ul{gap:8px;justify-content:space-between}}