.dev-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 40px;
  background-color: @neutral-90;
  padding: 5px 12px;

  button.widget {
    color: @neutral-10;
    margin: 0 4px;
    padding: 0 4px;
    border: none;
    text-decoration: none;
  }
}

.dev-toolbar-tooltip {
  a {
    color: @blue-20;
    &.btn {
      color: @neutral-10;
    }
  }

  &.tooltip.top {
    margin-top: -10px;
    opacity: 1;
  }
  .tooltip-inner {
    padding: 2px 8px 8px 8px;
    text-align: left;
    min-width: 300px;
    max-height: 800px;
    overflow-y: auto;
  }

  .title {
    margin-top: 4px;
  }

  .test-card {
    text-align: left;
    color: @neutral-10;
    padding: 6px;
    border: 2px solid @neutral-70;
    background-color: @neutral-80;
    border-radius: 4px;
    margin-top: 8px;

    &.override {
      border-color: @blue-40;
    }

    .test-name {
      font-family: monospace;
      font-size: @font-size-extra-small;
      font-weight: bold;
    }

    ul {
      li.variant-row {
        line-height: 24px;
      }
    }
  }

  .actions {
    margin-top: 8px;
    text-align: right;
  }

  ul {
    margin-bottom: 0;
  }
}