/* Main Topbar */
header.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-bg-pallete-300);
    
}

header.topbar .setting img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

header.topbar .breadcrumbs ol{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;  
}

header.topbar .breadcrumbs ol li{
    font-size: var(--font-size-xsmall);
    text-transform: uppercase;
}

header.topbar .setting {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-left: auto;
}

header.topbar .setting .settings {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    transition: display 0.3s ease-in-out;
    display: none;
}
header.topbar .setting .settings.active{
    display: flex;
}

header.topbar .setting .settings .light-theme-icon:hover,
header.topbar .setting .settings .dark-theme-icon:hover{
    animation: rotate-smooth 3s ease-in-out infinite;
}

body.theme-light header.topbar .setting .settings .light-theme-icon{
    display: none;
}
body.theme-dark header.topbar .setting .settings .dark-theme-icon{
    display: none;
}

header.topbar .setting .toggle-settings-icon{
    transition: transform 0.8s ease-in-out;
}

header.topbar .setting .toggle-settings-icon:hover{
    transform: rotate(90deg);
}