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