/* 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/>. */

.why-paused {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--paused-background-color);
  color: var(--paused-color);
  font-size: 12px;
  cursor: default;
  white-space: normal;
  font-weight: bold;

  &:not(.hidden) {
    min-height: 44px;
    border-bottom: 1px solid var(--theme-splitter-color);
    padding: 6px;
  }

  /* The component is always rendered as it's an aria live region and always need to
     be in the DOM for it to properly announce changes */
  &.hidden {
    opacity: 0;
  }
}

.why-paused > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.why-paused .info.icon {
  align-self: center;
  padding-right: 4px;
  margin-inline-start: 14px;
  margin-inline-end: 3px;
}

.why-paused .pause.reason {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
}

.why-paused .location {
  color: var(--paused-color);
  padding-block: 2px;
}

.why-paused :is(.location, .message, .mutationNode) {
  font-family: var(--monospace-font-family);
  font-weight: normal;
  font-size: 10px;
}

.why-paused .message.error {
  color: var(--paused-error-color);
  font-style: normal;
}