div.item-actions { display: none; flex-direction: row; position: absolute; top: 0px; right: 0px; background-color: #def; }
div.item-actions > a.action { cursor: pointer; display: block; width: 44px; height: 44px; font-size: 20px; line-height: 44px; text-align: center; text-decoration: none; }
div.item-actions > a.action i { position: relative; top: -1px; }
div.item-actions > a.action.disabled { cursor: auto; opacity: 0.3; }
div.item-actions > a.action.disabled:hover i { color: #555 !important; }
div.item-actions:hover > a.hover-active:not(:hover) i { color: #555; }

.wc_menu.actions-menu:not(.dark):after { border-color: #def; }

.item:hover div.item-actions,
.item.active div.item-actions { display: flex; }
.item.active:hover div.item-actions { background-color: #d0e0f0; }
.focushover .item:hover div.item-actions { background-color: #d0e0f0; }
.item.active:hover .wc_menu.actions-menu:not(.dark):after { border-color: #d0e0f0; }
.focushover .item:hover .wc_menu.actions-menu:not(.dark):after { border-color: #d0e0f0; }
.cpath_ui.focusable.light-focusable .item:hover div.item-actions { background-color: #d0e0f0; }

/*********************************************************************************************************************
 * Dark mode
 *********************************************************************************************************************/

.dark div.item-actions,
div.item-actions.dark { background-color: #666; }
.dark div.item-actions > a.action,
div.item-actions.dark > a.action { color: white; }
.dark div.item-actions > a.action:not(:hover) i,
div.item-actions.dark > a.action:not(:hover) i { color: white; }
.dark .item.active:hover div.item-actions,
.item.active:hover div.item-actions.dark { background-color: #555; }
.focushover .dark .item:hover div.item-actions,
.focushover .item:hover div.item-actions.dark { background-color: #555; }
.dark .wc_menu.actions-menu:after,
div.item-actions.dark > a.action .wc_menu:after { border-color: #666; }

/*********************************************************************************************************************
 * Collapsible styles and transitions
 *********************************************************************************************************************/

div.item-actions > a.action { transition: width 0.2s; overflow: visible; }
div.item-actions:not(.collapsed) > a.action.menu { width: 0 !important; overflow: hidden; } 
div.item-actions.collapsed > a.action:not(.menu) { width: 0 !important; overflow: hidden; }