/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

.frames div[role="listbox"] {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  outline-offset: -2px;
}

.frames div[role="listbox"] .frame {
  padding: 2px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  column-gap: 0.5em;
  flex-direction: row;
  align-items: center;
  margin: 2px;
  max-width: 100%;
  flex-wrap: wrap;
  outline-offset: -2px;
}

.frames div[role="listbox"] .frame * {
  user-select: none;
}

.frames .badge {
  flex-shrink: 0;
  margin-inline-end: 10px;
}

.frames .location {
  font-weight: normal;
  color: var(--theme-comment);
  margin: 0;
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* Trick to get the ellipsis at the start of the string */
  text-overflow: ellipsis;
  direction: rtl;
}

.call-stack-pane:dir(ltr) .frames .location {
  padding-right: 10px;
  text-align: right;
}

.call-stack-pane:dir(rtl) .frames .location {
  padding-left: 10px;
  text-align: left;
}

.call-stack-pane .location-async-cause {
  color: var(--theme-comment);
}

.frames .title {
  text-overflow: ellipsis;
  overflow: hidden;
  padding-inline-start: 20px;
}

.frames-group .title {
  padding-inline-start: 30px;
}

.frames div[role="listbox"] .frame:hover,
.frames div[role="listbox"] .frame:focus {
    background-color: var(--theme-toolbar-background-alt);
}

.frames div[role="listbox"] .location-async-cause:hover,
.frames div[role="listbox"] .location-async-cause:focus
.frames div[role="listbox"] .location-async-cause:hover .async-label,
.frames div[role="listbox"] .location-async-cause:focus .async-label{
  background-color: var(--theme-body-background);
}

.frames div[role="listbox"] .frame:focus {
  box-shadow: none;
}

.frames div[role="listbox"] .frame.selected {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
  outline-offset: 1px;
}

.frames div[role="listbox"] .frame.dead {
  color: var(--theme-text-color-inactive);
}

.frames div[role="listbox"] .frame.inactive,
.frames div[role="listbox"] .frame.inactive.async-label {
  background-color: light-dark(var(--theme-toolbar-background-alt), var(--theme-body-alternate-emphasized-background));
}


.frames div[role="listbox"] .frame.selected i.annotation-logo svg path {
  fill: var(--theme-selection-color);
}

:root.theme-light .frames div[role="listbox"] .frame.selected .location,
:root.theme-dark .frames div[role="listbox"] .frame.selected .location {
  color: var(--theme-selection-color);
}

.frames .show-more-container {
  display: flex;
  min-height: 24px;
  padding: 4px 0;
}

.frames .show-more {
  text-align: center;
  padding: 8px 0;
  margin: 7px 10px 7px 7px;
  border: 1px solid var(--theme-splitter-color);
  background-color: var(--theme-tab-toolbar-background);
  width: 100%;
  font-size: inherit;
  color: inherit;
}

.frames .show-more:hover {
  background-color: var(--theme-toolbar-background-hover);
}

.frames .img.annotation-logo {
  margin-inline-end: 4px;
  background-color: currentColor;
}

/*
 * We also show the library icon in locations, which are forced to RTL.
 */
.frames .location .img.annotation-logo {
  margin-inline-start: 4px;
}

/* Some elements are added to the DOM only to be printed into the clipboard
   when the user copy some elements. We don't want those elements to mess with
   the layout so we put them outside of the screen
*/
.frames .clipboard-only {
  position: absolute;
  left: -9999px;
}

.call-stack-pane .location-async-cause {
  --label-padding: 20px;

  color: var(--theme-text-color-alt);
  display: flex;
  align-items: center;
  padding-block: 2px;
  width: 100%;
  pointer-events: none;

  &::before,
  &::after {
    content: "";
    height: 1px;
    translate: 0 1px;
    background-color: var(--theme-splitter-color);
  }

  &::before {
    width: var(--label-padding);
  }

  &::after {
    flex: 1;
  }

}

.frames-group .location-async-cause {
  --label-padding: 50px;
}

.call-stack-pane .async-label {
  padding: 0 3px;
  display: inline-block;
  font-style: italic;
}
