/* One neutral surface for secondary actions in both themes. Loaded after page styles. */
body[data-theme="dark"] {
  --secondary-action-bg: #0b1020;
  --secondary-action-hover-bg: #172036;
  --secondary-action-border: #303b55;
  --secondary-action-hover-border: #53617e;
  --secondary-action-text: #e2e8f8;
}

body[data-theme="light"] {
  --secondary-action-bg: #dfe6f0;
  --secondary-action-hover-bg: #ced9e8;
  --secondary-action-border: #aebbd0;
  --secondary-action-hover-border: #8395b2;
  --secondary-action-text: #172033;
}

body[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .spk-btn-secondary, .sidebar-collapse-btn),
body[data-theme] .app-topbar .app-topbar-action:not(.app-topbar-cut) {
  background: var(--secondary-action-bg) !important;
  border-color: var(--secondary-action-border) !important;
  color: var(--secondary-action-text) !important;
  box-shadow: none !important;
}

body[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .spk-btn-secondary, .sidebar-collapse-btn):is(:hover, :focus-visible, [aria-expanded="true"]),
body[data-theme] .app-topbar .app-topbar-action:not(.app-topbar-cut):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--secondary-action-hover-bg) !important;
  border-color: var(--secondary-action-hover-border) !important;
  color: var(--secondary-action-text) !important;
}

body[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .spk-btn-secondary, .sidebar-collapse-btn, .app-topbar-action):focus-visible {
  outline: 2px solid var(--secondary-action-hover-border);
  outline-offset: 2px;
}

/* Cut corners use pseudo-elements for their border and fill. */
body[data-theme] #appTopbar :is(.app-topbar-cut, #sidebarToggle) {
  --topbar-cut-border: var(--secondary-action-border);
  --topbar-cut-fill: var(--secondary-action-bg);
  background: transparent !important;
  border-color: transparent !important;
  color: var(--secondary-action-text) !important;
}

body[data-theme] #appTopbar :is(.app-topbar-cut, #sidebarToggle):is(:hover, :focus-visible, [aria-expanded="true"]) {
  --topbar-cut-border: var(--secondary-action-hover-border);
  --topbar-cut-fill: var(--secondary-action-hover-bg);
}

body[data-theme] :is(.event-view-back, .event-view-toolbar .btn-outline-secondary) {
  --back-border: var(--secondary-action-border);
  --back-fill: var(--secondary-action-bg);
  background: transparent !important;
  border-color: transparent !important;
  color: var(--secondary-action-text) !important;
}

body[data-theme] :is(.event-view-back, .event-view-toolbar .btn-outline-secondary):is(:hover, :focus-visible) {
  --back-border: var(--secondary-action-hover-border);
  --back-fill: var(--secondary-action-hover-bg);
}

body[data-theme] :is(.event-view-back, .event-view-toolbar .btn-outline-secondary):is(:hover, :focus-visible)::after {
  background: var(--back-fill);
}

body[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .spk-btn-secondary, .sidebar-collapse-btn, .app-topbar-action):disabled,
body[data-theme] :is(.btn-outline-secondary, .btn-outline-light, .spk-btn-secondary, .sidebar-collapse-btn, .app-topbar-action).disabled {
  opacity: .5;
}