.agent {
  width: 80%;
  box-sizing: border-box;
  padding: 1em;
  border: 1px solid var(--border-color);
  margin: 0.5em;
  border-radius: 5px;

  .header {
    display: flex;
    flex-direction: row;
    padding-bottom: 1em;
    align-items: center;
    .id {
      color: var(--text-color);
      font-weight: bold;
      cursor: pointer;
      &:hover {
        color: var(--highlight-blue);
      }
    }
    .class {
      margin-left: 2em;
      font-size: 0.9em;
    }
    .last-heartbeat {
      margin-left: 2em;
      font-size: 0.9em;
      color: rgb(147, 147, 147);
      &.alive {
        color: var(--highlight-green);
        font-weight: bold;
      }
    }
    .fill {
      flex-grow: 1;
    }
    .settings {
      position: relative;
      .icon {
        visibility: hidden;
        cursor: pointer;
        path {
          fill: var(--text-color);
        }
        &:hover path {
          fill: var(--highlight-blue);
        }
      }
      &:not(:focus) .agent-menu {
        display: none;
      }
    }
  }

  .flow {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
    display: inline-block;
    &:hover {
      background-color: var(--hover-bg-color);
    }
  }
}

.agent:hover .header .settings .icon {
  visibility: initial;
}