@use 'backend' as *;

#{c(popouts menus menu)} {
  background: cv('shading.popout');
  border: none;
  border-radius: 5px;
}
#{c(popouts menus colorDefault)} {
  &#{c(popouts menus itemFocused)} {
    background-color: cv('color.hover');
  }
  &:active {
    &:not(#{c(popouts menus itemHideInteraction)}) {
      background-color: cv('color.main');
    }
  }
}
#{c(popouts menus colorDanger)} {
  &#{c(popouts menus itemFocused)} {
    background-color: cv('color.danger');
    &:not(#{c(popouts menus checkboxContainer)}) {
      // discord does it this way
      path {
        fill: var(--interactive-active);
      }
    }
  }
  &:active {
    &:not(#{c(popouts menus itemHideInteraction)}) {
      background-color: hsl(from cv('color.danger') h s l/.8);
      color: var(--interactive-active);
      #{c(popouts menus label)} {
        color: var(--interactive-active);
      }
    }
  }
}
#{c(popouts menus item)} {
  &#{c(popouts menus itemFocused)} {
    #{c(popouts menus label)} {
      color: var(--header-primary);
    }
  }
}

// STATUS PICKER
// inline styles
#{c(popouts menus status)} {
  &[style*='rgb(130, 131, 139)'] {
    background-color: cv('color.offline') !important;
  }
  &[style*='rgb(67, 162, 90)'] {
    background-color: cv('color.online') !important;
  }
  &[style*='rgb(202, 150, 84)'] {
    background-color: cv('color.idle') !important;
  }
  &[style*='rgb(216, 58, 66)'] {
    background-color: cv('color.dnd') !important;
  }
}
#{c(popouts menus itemFocused)} {
  &#set-status-submenu-online {
    background-color: cv('color.online');
  }
  &#set-status-submenu-idle {
    background-color: cv('color.idle');
  }
  &#set-status-submenu-dnd {
    background-color: cv('color.dnd');
  }
  &#set-status-submenu-invisible {
    background-color: cv('color.offline');
  }
}

// ACCOUNT SWITCHER
#{c(popouts menus accountSwitcher activeIcon)} {
  path {
    fill: cv('color.main');
  }
  #{c(popouts menus accountSwitcher focused)} & {
    circle {
      fill: cv('color.main');
    }
  }
}