.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;
  }

  .collapse-button {
    position: absolute;
    padding: 0;
    margin-top: -2px;
    color: @neutral-50;

    span {
      font-size: 28px;
    }

    &:hover {
      color: @neutral-30;
    }
  }
}

.dev-tool-bar-open-button {
  position: fixed;
  bottom: -2px;
  left: 6px;
  color: @neutral-50;

  span {
    font-size: 28px;
  }

  &:hover {
    color: @neutral-30;
  }
}

.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;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 0;

        .btn {
          color: @white;
        }

        .material-symbols {
          vertical-align: text-top;
          font-weight: 400;
        }
      }
    }
  }

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

  ul {
    margin-bottom: 0;
  }
}