.workbench-tabs {
  display: flex;
  align-items: center;
  height: 47px;
  border-bottom: 1px solid #f3f3f3;
  margin-left: 24px;
  margin-right: 24px;
  font-size: 14px;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    left: var(--active-offset-left);
    bottom: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--deep-blue);
    width: var(--active-width);
    transition:
      left 0.2s ease-in-out,
      width 0.2s ease-in-out;
  }
}

.button-item {
  cursor: pointer;
  margin-right: 24px;
  min-width: 60px;
  text-align: center;
  color: #72767c;
  transition: color 0.2s ease-in-out;
  &:hover {
    color: var(--deep-blue);
  }
  &.active {
    font-weight: 500;
    color: var(--deep-blue);
  }
}
