/*
 * Vivaldi Extension Manager
 * Version: 2026.07.09
 * Author: sudenim & luetage
 * Description: Provides various functions and tools for extensions
 * link
 *
 * GNU General Public License v3.0
*/

/* Hide default webpanel chrome */
.panel.webpanel:has([data-extension-manager]) > .webpanel-content { display: none !important; }

/* Header */
#panels-container #panels .webpanel-stack [data-extension-manager] header { padding: 12px var(--scrollbarWidth) 0 9px; }

#em-toolbar { display: flex; gap: 5px; align-items: center; }

#em-search { outline: none; }

#em-toolbar .button-toolbar { display: flex; gap: 5px; }

/* Privacy mode button */
#em-privacy.em-privacy-active { color: var(--colorHighlightBg); }

/* Panel content wrapper */
.em-content { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 var(--scrollbarWidth) 0 9px; cursor: default; user-select: none; overflow: hidden; }

/* Switcher */
#em-switcher { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; scroll-behavior: smooth; }

/* Extension items */
.em-extension { position: relative; display: flex; align-items: center; padding: 8px 16px; cursor: pointer; gap: 4px; }
.em-extension > div { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alternating row colours */
.em-extension.em-odd, .em-extension.em-odd + #em-menu, .em-extension.em-odd + #em-menu + .em-info, .em-extension.em-odd + .em-info {
    background-color: var(--colorFgAlpha);
}

.em-extension:hover { background-color: var(--colorHighlightBg); color: var(--colorHighlightFg); }
.em-extension.em-enabled { font-weight: 600; color: var(--colorHighlightBg); }
.em-extension.em-enabled:hover { color: var(--colorHighlightFg); }

/* Expanded menu */
#em-menu { padding: 12px; overflow: hidden; }

/* Animations */
@keyframes em-open {
    from { opacity: 0; transform: scaleY(0); }
    60%  { transform: scaleY(1); }
    to   { opacity: 1; transform: scaleY(1); }
}

@keyframes em-close {
    from { opacity: 1; transform: scaleY(1); }
    50%  { opacity: 0; }
    to   { opacity: 0; transform: scaleY(0); }
}

#em-menu { opacity: 0; animation: em-open 0.5s ease forwards; transform-origin: top; }
#em-menu.em-menu-closing { animation: em-close 0.4s ease forwards; }

@keyframes em-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes em-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.em-extension:has(+ #em-menu) .em-rename, .em-extension:has(+ #em-menu) .em-reset { animation: em-fade-in 0.5s ease forwards; }
.em-extension:has(+ #em-menu.em-menu-closing) .em-rename, .em-extension:has(+ #em-menu.em-menu-closing) .em-reset { animation: em-fade-out 0.4s ease forwards; }

/* Inline rename editor */
.em-rename-wrapper { display: flex; align-items: center; flex: 1; min-width: 0; }

.em-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--colorBgDarker);
  border: 1px solid var(--colorHighlightBg);
  border-radius: var(--radius);
  color: var(--colorFg);
  padding: 2px 6px;
  outline: none;
  font-size: inherit;
}

/* Rename & reset buttons */
.em-rename, .em-reset {
  visibility: hidden;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  color: var(--colorFg);
  opacity: 0.5;
}

.em-extension:has(+ #em-menu) .em-rename, .em-extension:has(+ #em-menu) .em-reset {
  visibility: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-rename svg { width: 16px; height: 16px; }
.em-reset svg { width: 18px; height: 18px; }

.em-reset { margin-right: 2px; }
.em-rename:hover, .em-reset:hover { transform: scale(1.15); transition: .05s ease-in-out; opacity: 1; }
.em-extension:has(+ #em-menu):hover .em-rename, .em-extension:has(+ #em-menu):hover .em-reset { color: var(--colorHighlightFg); }

/* Options & Uninstall buttons */
.em-btn-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; width: 100%; }

.em-btn {
  font-weight: 500;
  width: calc(50% - 3px);
  text-align: center;
  padding: 8px 25px;
  border-radius: var(--radius);
  border: 0;
  background-color: var(--colorBgDarker);
  color: var(--colorFg);
  cursor: pointer;
  box-sizing: border-box;
}

.em-btn:hover { background-color: var(--colorHighlightBg); color: var(--colorHighlightFg); }
.em-btn.em-options:not(.em-opt-active) { opacity: 0.4; cursor: default; pointer-events: none; }
.em-btn.em-uninstall:hover { background-color: var(--colorErrorBg); color: var(--colorErrorFg); }

/* Extension information */
.em-info { padding: 0 8px 10px; white-space: normal; word-break: break-all; color: var(--colorFg); }

.em-info p { margin: 0 0 4px 0; }
.em-info p:last-of-type { margin-bottom: 0; }

.em-info a { display: inline-block; cursor: pointer; text-decoration: none; color: var(--colorHighlightBg); }
#em-menu .em-info a:hover { color: var(--colorHighlightBg); outline: none !important; }
.em-info a:after { content: ''; display: block; margin: 3px auto 0; height: 1px; width: 0; background: transparent; transition: width 0.3s ease, background-color 0.3s ease; }
.em-info a:hover:after { width: 100%; background: var(--colorFg); }

.em-desc { font-weight: 600; color: var(--colorHighlightBg); }

#em-copy { cursor: pointer; }

/* Fix for new :after elements added to toolbar buttons in v8.1 */
#panels-container.left .button-toolbar button::after, #panels-container.right .button-toolbar button::after { pointer-events: none !important; }