mempool/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss

.block-overview-tooltip {
  position: absolute;
  background: rgba(#11131f, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 15px;
  text-align: left;
  min-width: 340px;
  max-width: 400px;
  pointer-events: none;
  z-index: 11;

  &.clickable {
    pointer-events: all;
  }
}

th, td {
  &.label {
    width: 30%;
  }
  &.value {
    width: 70%;
    text-align: end;
  }
}

.badge.badge-accelerated {
  background-color: var(--tertiary);
  box-shadow: #ad7de57f 0px 0px 12px -2px;
  color: white;
  animation: acceleratePulse 1s infinite;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25em;
  margin-top: 0.2em;
  max-width: 310px;

  .badge {
    border-radius: 0.2rem;
    padding: 0.2em 0.5em;
    margin-right: 0.25em;
  }

  .filter-tag {
    background: #181b2daf;
    border: solid 1px var(--primary);
    color: white;
    transition: background-color 300ms;

    &.matching {
      background-color: var(--primary);
    }
  }

  &.any-mode {
    .filter-tag {
      border: solid 1px var(--success);
      &.matching {
        background-color: var(--success);
      }
    }
  }
}

@keyframes acceleratePulse {
  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
  50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
}