//  debug-bar is used by
//    debug-menu-bar
//    xdebug-menu-bar
.debug-bar {
  position: relative;
  // padding: 5px;
  // font-size: 115%;
  // background-color: rgba(0, 0, 0, 0.2);
  // margin-bottom: 10px;
  a {
    color: var(--color-fg-2);
  }
  button {
    border-radius: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    &.close {
      font-size: 21px;
      font-weight: 300;
    }
  }
  .float-right {
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 23px;
    button {
      height: 18px;
      border: 0;
      padding: 0;
      line-height: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: transparent;
    }
  }
}
.debug-error-counts {
  position: relative;
  top: -2px;
  font-size: 0.78em;
  .badge {
    padding: 0 0.4em 0 0.25em;
    color: inherit;
    background: inherit;
    font-size: inherit;
    vertical-align: unset;
  }
}

&.debug-enhanced-ui {
}

.debug-bar {
  border-top: 1px solid var(--color-ui-border);
  border-bottom: 1px solid var(--color-ui-border);
  padding: 0 34px 0 6px;
  margin-bottom: 0;
  color: var(--color-fg-2);
  background: var(--color-bg-2);
  font-size: 16px;

  a,
  button,
  label {
    &:focus,
    &:hover {
      color: var(--color-fg-hover);
      text-decoration: none;
    }
  }

  nav {
    margin-left: 20px;
    line-height: 23px;
    a {
      line-height: 23px;
      &.has-assert {
        line-height: 22px;
        border-bottom: $color-tab-assert-border solid 2px;
      }
      &.has-warn {
        line-height: 22px;
        border-bottom: $color-tab-warn-border solid 2px;
      }
      &.has-error {
        line-height: 22px;
        border-bottom: $color-tab-error-border solid 2px;
      }
      &.active {
        line-height: 22px;
        border-bottom: $color-tab-active-border solid 2px;
      }
    }
  }

  > span {
    display: inline-block;
    line-height: 23px;
  }
}
