/* MENU POPOUT */
%menuPopout {
  background-color: cv('bg.general.popout');
  animation: cv-menu-fold-y 0.2s cubic-bezier(0.2, 0.6, 0.5, 1.1);
  transform-origin: 50% 0;
  %menuPopoutItem {
    transition: all 0.15s ease-in-out;
    &%menuPopoutItemHover {
      background-color: $hover-color;
      color: #fff;
      %menuPopoutCheckbox,
      %menuPopoutRadio {
        color: #fff;
      }
      %menuPopoutCheck {
        fill: $main-color;
      }
    }
    &%menuPopoutSelected:active:not(%menuPopoutHideInteraction) {
      background-color: $hover-color;
      color: #fff;
      border-color: $hover-color;
    }
    %menuPopoutCheckbox,
    %menuPopoutRadio {
      color: $main-color;
    }
  }
  %menuPopoutItemInvite {
    color: $main-color;
  }
  %menuPopoutItemDanger {
    color: var(--danger-color);
    &%menuPopoutItemHover {
      background-color: var(--danger-color);
      color: #fff;
      %menuPopoutIcon {
        transform: rotateY(180deg);
        transition: all 0.15s ease-in-out;
      }
    }
  }
}

// QUICK REACTIONS
%quickReactButton {
  background-color: transparent;
  &%quickReactButtonFocused,
  &:hover {
    background-color: transparent;
  }
  &%quickReactButtonFocused {
    box-shadow: 0 0 2px 2px $hover-color;
  }
}
%quickReactPremiumUpsell {
  background-color: transparent;
}

// CHANNEL THREAD MENU
%channelThreadPopout {
  background-color: hsla(0, 0%, 0%, 0.8);
  %channelThreadPopoutRow:hover {
    background-color: $hover-color;
  }
  %channelThreadPopoutMore {
    color: $main-color;
  }
}

// STATUS PICKER
%menuPopoutItem {
  &#set-status-submenu-online {
    &%menuPopoutItemHover {
      background-color: cv('colors.online');
    }
  }
  &#set-status-submenu-idle{
    &%menuPopoutItemHover {
      background-color: cv('colors.idle');
    }
  }
  &#set-status-submenu-dnd {
    &%menuPopoutItemHover {
      background-color: cv('colors.dnd');
    }
  }
  &#set-status-submenu-invisible {
    &%menuPopoutItemHover {
      background-color: cv('colors.offline');
    }
  }
}

// ACCOUNT SWITCHER
%switchAccountsActive {
  path {
    fill: $main-color;
  }
  %menuPopoutItemHover & circle {
    fill: $main-color;
  }
}
