.top-bar-settings{justify-self:end}.top-bar-settings__button{padding-block:.15rem;padding-inline:.15rem;border-radius:.5rem;display:flex;align-items:center;justify-content:flex-end;gap:1rem;cursor:pointer;transition:background-color .2s}@media(min-width: 768px){.top-bar-settings__button{padding-block:.5rem;padding-inline:1rem}}.top-bar-settings__button .user-name{display:none}@media(min-width: 768px){.top-bar-settings__button .user-name{display:block}}.top-bar-settings__button .user-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:var(--neutral-100);overflow:hidden}.top-bar-settings__button .user-avatar svg{width:20px;height:20px;color:var(--neutral-600)}.top-bar-settings__button .arrow{width:20px;transition:transform .2s ease-in-out}.top-bar-settings__button:hover{background-color:var(--neutral-100);transition:background-color .2s ease-in-out}.top-bar-settings[data-open=true]{background-color:var(--neutral-100);border-radius:.5rem}.top-bar-settings[data-open=true] .top-bar-settings__submenu{display:block}.top-bar-settings[data-open=true] .arrow{transform:rotate(180deg)}.top-bar-settings__submenu{position:absolute;right:1rem;top:calc(100% - .25rem);background:var(--neutral-0);border:1px solid var(--neutral-100);box-shadow:0 2px 8px rgba(0,0,0,.1);list-style:none;margin:0;min-width:150px;z-index:100;display:none;border-radius:1rem}.top-bar-settings__submenu li{padding:0}.top-bar-settings__submenu li:first-child a{border-radius:1rem 1rem 0 0}.top-bar-settings__submenu li:last-child a{border-radius:0 0 1rem 1rem}.top-bar-settings__submenu li a,.top-bar-settings__submenu li .item{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;color:var(--neutral-900);text-decoration:none}.top-bar-settings__submenu li a:hover,.top-bar-settings__submenu li .item:hover{background:var(--neutral-50)}.top-bar-settings__submenu li a svg,.top-bar-settings__submenu li .item svg{width:20px;height:20px;flex-shrink:0}.top-bar-settings__submenu .theme-select{background:var(--neutral-50);color:var(--neutral-800);display:block;width:100%;padding:.5rem;font-size:.9em;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:border-color .2s}.top-bar-settings__submenu .theme-select:focus{border-color:var(--accent-500, #007bff);outline:none}